Question

好的。我完全被这里难过了。

我有一个水平滚动列表，当你不能再滚动时，按钮/箭头会改变颜色（通过addClass removeClass）。我的小提琴（几乎）完美无缺。另一方面，我的代码没有......

jQuery的：

$(document).ready(function() {

    var $item = $('div.mainBodyContentListItem'),
        //Cache your DOM selector
        visible = 2,
        //Set the number of items that will be visible
        index = 0,
        //Starting index
        endIndex = ($item.length / visible) - 1; //End index
    $('div.mainBodyContentArrowR').click(function() {
        if (index < endIndex) { //can scroll
            index++;
            $item.animate({
                'left': '-=592px'
            });
        }
    });

    $('div.mainBodyContentArrowR').click(function() {
        if (index > endIndex) { //can't scroll
            $('div.mainBodyContentArrowR').addClass('disable');
        }
    });

    $('div.mainBodyContentArrowR').click(function() {
        if (index < endIndex) { //can scroll
            $('div.mainBodyContentArrowL').removeClass('disable');
        }
    });



    $('div.mainBodyContentArrowL').click(function() {
        if (index > 0) { //can scroll
            index--;
            $item.animate({
                'left': '+=592px'
            });
        }
    });

    $('div.mainBodyContentArrowL').click(function() {
        if (index < 0) { //can't scroll
            $('div.mainBodyContentArrowL').addClass('disable');
        }
    });

    $('div.mainBodyContentArrowL').click(function() {
        if (index > 0) { //can scroll
            $('div.mainBodyContentArrowR').removeClass('disable');
        }
    });


});

这样可以正常工作（除了没有弄清楚如何解决返回的问题并再次点击滚动的结尾，因为它是在页面加载时，不会将类添加回来并更改颜色 - 随意解决，但这不是这个线程的问题。）

我的实际代码在此实例中正确执行：

 $('div.mainBodyContentArrowR').click(function() {
            if (index < endIndex) { //can scroll
                $('div.mainBodyContentArrowL').removeClass('disable');
            }
        });

但没有其他地方。我在这里难过。奇怪的是，我上面概述的那条线工作正常。 'disable'类在第一次单击时被删除，然后那些addClass removeClass行没有做任何事情（来回滚动确实有效并且正常停止）。

请任何帮助表示赞赏。我觉得我只是盯着一个50英尺高的砖墙，却看不到我的路。或者说。

Answer 1

如果你改变了

if(index < endIndex)

到

if(index <= endIndex)

有效吗？

您提到的另一个问题（如果

，则不应修复此主题的主题）

if(index > 0)

更改为

if(index >= 1)

我知道你在评论中提到的问题即将来临。要解决该问题，您需要在计算结束索引的行之后添加以下行

if(($item.length % visible) == 0){
    enIndex = endIndex - 1;
}

Answer 2

你也可以这样试试：

$(document).ready(function () {
    'use strict';
    var $item = $('div.mainBodyContentListItem'), //Cache your DOM selectors
        mbcArrowR = $('div.mainBodyContentArrowR'),
        mbcArrowL = $('div.mainBodyContentArrowL'),
        visible = 2, //Set the number of items that will be visible
        index = 0, //Starting index
        endIndex = ($item.length / visible) - 1; //End index
    mbcArrowR.click(function () {
        if (index < endIndex) { //can scroll
            index += 1;
            $item.animate({
                'left': '-=592px'
            });
            mbcArrowL.removeClass('disable');
        }
        mbcArrowR.toggleClass('disable', index >= endIndex);
    });
    mbcArrowL.click(function () {
        if (index > 0) { //can scroll
            index -= 1;
            $item.animate({
                'left': '+=592px'
            });
            mbcArrowR.removeClass('disable');
        }
        mbcArrowL.toggleClass('disable', index <= 0);
    });
});

更新了小提琴：http://jsfiddle.net/4rKPT/9/

jQuery If Statement - 小提琴有效，网站没有

2 个答案: