jQuery If 语句 - 小提琴有效，网站无效答案

【问题标题】：jQuery If Statement - fiddle works, website doesn'tjQuery If 语句 - 小提琴有效，网站无效
【发布时间】：2012-11-21 02:35:53
【问题描述】：

好的。我完全被难住了。

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

小提琴：http://jsfiddle.net/4rKPT/8/

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');
            }
        });

但没有其他地方。我被难住了。奇怪的是，我上面概述的那条线工作正常。第一次单击时将删除“禁用”类，然后那些 addClass removeClass 行不执行任何操作（来回滚动确实可以正常工作并停止）。

感谢任何帮助。我觉得我只是盯着一堵 50 英尺的砖墙，看不到我穿过或越过的路。

【问题讨论】：

我的错误发生在哪里？你能说得更具体一点吗？

标签： jquery if-statement addclass jsfiddle removeclass

【解决方案1】：

如果你改变了

if(index < endIndex)

到

if(index <= endIndex)

有效吗？

你提到的另一个问题（如果不是这个线程的主题也应该得到解决

if(index > 0)

改为

if(index >= 1)

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

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

【讨论】：

是的~！！不...... :(因为我必须在代码的水平滚动功能上实现这个，似乎方程导致它“过度滚动”。如果那里没有其他东西，它需要停止，但它就是那个额外的步骤和动画没有任何显示然后禁用。但这仍然非常接近。谢谢！
添加了更多代码。这应该可以解决问题。当我在手机上打字时，请忍受代码格式。
它还需要一行来解决关于禁用向左滚动的以下行：if (index >= 0)。现在它允许 = 0，它正在启用额外的滚动（您已将其固定到右侧）。但是，如果您删除它，它会与 addClass 项上的修复一起拧紧……嗯……如此接近。我得考虑一下这个。
再次更新了答案。将 if 语句中的 0 改为 1。
你 = 男人。谢谢苏哈斯！

【解决方案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/

【讨论】：