1

好吧。我在这里完全被难住了。

我有一个水平滚动列表，当您无法再滚动时，按钮/箭头会改变颜色（通过 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 英尺的砖墙，看不到我穿过或越过的路。

4

2 回答 2

2

如果你改变

if(index < endIndex)

至

if(index <= endIndex)

它有效吗？

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

if(index > 0)

改为

if(index >= 1)

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

if(($item.length % visible) == 0){
    enIndex = endIndex - 1;
}
于 2012-11-21T02:58:42.333 回答
0

You could also try it this way:

$(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);
    });
});​

Updated fiddle: http://jsfiddle.net/4rKPT/9/

于 2012-11-21T04:06:52.117 回答