jQuery If Statement - скрипка работает, веб-сайт - нет

Хорошо. Я здесь совершенно запутался.

У меня есть список с горизонтальной прокруткой, который, когда вы больше не можете прокручивать, кнопка/стрелка меняет цвет (через 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-футовую кирпичную стену и просто не вижу своего пути сквозь нее или через нее.


if-statement jquery jsfiddle addclass removeclass
person jstacks    schedule 21.11.2012    source источник
comment
Где это применимо здесь, что моя ошибка происходит? Не могли бы вы быть более конкретным?   -  person jstacks    schedule 21.11.2012

Ответы (2)


arrow_upward
2
arrow_downward

Если вы измените

if(index < endIndex)

to

if(index <= endIndex)

Это работает?

Другая проблема, о которой вы упомянули (не тема этой темы, также должна быть исправлена, если

if(index > 0)

меняется на

if(index >= 1)

Я знал, что проблема, о которой вы упомянули в комментарии, грядет. Чтобы решить эту проблему, вам нужно будет добавить следующую строку после строки, которая вычисляет конечный индекс

if(($item.length % visible) == 0){
    enIndex = endIndex - 1;
}
person Suhas    schedule 21.11.2012
comment
ДА~!! И нет.... :( Поскольку я должен реализовать это для функции горизонтальной прокрутки кода, кажется, что уравнение вызывает ее перескролл. Он должен остановиться, если там больше ничего нет, но он идет на один дополнительный шаг и анимирует ничего не показывая потом отключает.Но это все равно очень близко.Спасибо! - person jstacks; 21.11.2012
comment
Добавил больше кода. Это должно решить проблему. Смиритесь с форматированием кода, так как я печатаю с телефона. - person Suhas; 21.11.2012
comment
Требуется еще одна строка, адресованная следующей строке, касающейся отключения прокрутки влево: if (index ›= 0). Теперь, когда он позволяет = 0, он включает дополнительную прокрутку (вы исправили это движение вправо). Но если вы удалите это, это исправит исправление в элементе addClass ... хммм ... так близко. Я должен подумать об этом. - person jstacks; 21.11.2012
comment
Обновил ответ еще раз. Изменил 0 в выражении if на 1. - person Suhas; 21.11.2012
comment
Вы = Мужчина. Спасибо Сухас! - person jstacks; 21.11.2012

arrow_upward
0
arrow_downward

Вы также можете попробовать это так:

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

person pete    schedule 21.11.2012