Я использовал функцию onBefore в serialScroll, чтобы выделить текущий прокручиваемый выбор в списке навигации, хотя я также хочу, чтобы навигация выделялась, если она наведена. Это работает, за исключением случаев, когда мышь покидает область. Затем из него удаляются все стили.

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

Код выглядит следующим образом:

onBefore: function(){
            $('#selector ul li').eq($counter).find('a').css({color: '#d5d5d6'});

            if($counter == 3){
                $counter = 0;   
            } else {
                $counter++;
            }

            if($counter == 0){
                $('#selector ul li').eq($counter).find('a').css({color: '#666666'}).addClass('highlighted');
            }
            if($counter == 1){
                $('#selector ul li').eq($counter).find('a').css({color: '#55b447'}).addClass('highlighted');
            }
            if($counter == 2){
                $('#selector ul li').eq($counter).find('a').css({color: '#2685c7'}).addClass('highlighted');
            }
            if($counter == 3){
                $('#selector ul li').eq($counter).find('a').css({color: '#f6db0a'}).addClass('highlighted');
            }

        }

});




    });

    // Hover Selector links to respective color

    $('#selector ul li').eq(0).not('.highlighted').find('a').hover(
        function(){
        $(this).css({color: '#666666'});
    },
        function() {
        $(this).css({color: '#d5d5d6'});
        }
    );

    $('#selector ul li').eq(1).not('.highlighted').find('a').hover(
        function(){
        $(this).css({color: '#55b447'});
    },
        function() {
        $(this).css({color: '#d5d5d6'});
        }
    );

    $('#selector ul li').eq(2).not('.highlighted').find('a').hover(
        function(){
        $(this).css({color: '#2685c7'});
    },
        function() {
        $(this).css({color: '#d5d5d6'});
        }
    );

    $('#selector ul li').eq(3).not('.highlighted').find('a').hover(
        function(){
        $(this).css({color: '#f6db0a'});
    },
        function() {
        $(this).css({color: '#d5d5d6'});
        }
    );
0
Alexander 17 Мар 2011 в 22:50
Jquery .not работает только тогда, когда в одной из выбранных групп действительно есть выделенный класс. Вы уверены, что есть? Попробуйте что-нибудь вроде console.debug($('#selector ul li').eq(1).not('.highlighted')); и посмотрите, что получится.
 – 
gailbear
17 Мар 2011 в 23:08
Я проверил с помощью различных методов (firebug), и выделенный класс добавляется к текущему элементу навигации в ползунке, как я его закодировал. Озадачен.
 – 
Alexander
18 Мар 2011 в 01:20
Я бы выяснил, что на самом деле выбирается с помощью $('#selector ul li').eq(1) и $('#selector ul li').eq(1).not('.highlighted')), используя console.debug или console.log.
 – 
gailbear
18 Мар 2011 в 18:31

1 ответ

Будьте осторожны, так как .not возвращает объект JQuery, а не логическое значение, соедините .not с .length, чтобы получить ожидаемый результат. Или используйте .hasClass для более ясной логики.

0
dwitvliet 28 Июл 2014 в 20:49