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

しかし、他にはありません。私はここで困惑しています。奇妙なことに、私が上で概説したその行は正しく機能しています。'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

この方法で試すこともできます：

$(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/

于 2012-11-21T04:06:52.117 に答える