Оператор переключения Jquery иногда работает - PullRequest
2 голосов
/ 09 декабря 2011

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

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

Прокрутка всегда работает, анимация иногда срабатывает, а при наведении работает, обычно мне приходится дважды щелкать ссылку. Возвращаемое значение false работает только для первой ссылки, которую вы нажали.

Используются плагины scrollTo и animate-colors.

Может кто-нибудь сказать мне, что я делаю не так?

$(".scrolltoanchor").click(function() {
                                $('a').removeClass('selected');
                                $(this).addClass('selected');
        $.scrollTo($($(this).attr("href")), {
            duration: 750
        });

        switch ($(this).attr("id")) {
            case 'personal':
            $('.scrolltoanchor').animate({color: '#E4D8B8'});
            $(".scrolltoanchor").hover(
            function() {
            $(this).css('color', 'blue');
            },function(){
            $(this).css('color', '#E4D8B8');
            });
            break;

            case 'achievements':
            $('.scrolltoanchor').animate({color: '#ffffff'});
            $(".scrolltoanchor").hover(
            function() {
            $(this).css('color', 'red');
            },function(){
            $(this).css('color', '#ffffff');
            });
            break;

            case 'skills':
            $('.scrolltoanchor').animate({color: '#dddddd'});
            $(".scrolltoanchor").hover(
            function() {
            $(this).css('color', 'orange');
            },function(){
            $(this).css('color', '#ffffff');
            });
            break;


        }

        return false;
    });

Извините, что попросил, чтобы меня обманывают, но я следовал тому, что я считал правильным синтаксисом из того, что я выучил. Есть ли что-то, что я должен знать, чтобы остановить эту работу, как я ожидаю?

РЕДАКТИРОВАТЬ: Извините, я забыл, я получаю эту ошибку (в среднем) каждый второй щелчок ссылки прокрутки

Uncaught TypeError: Невозможно прочитать свойство '0' из неопределенного

Я не могу определить реальную модель. Иногда кажется, что это происходит только с теми, на которые раньше не нажимали, иногда нет. Спасибо

Ответы [ 2 ]

4 голосов
/ 09 декабря 2011

Вы выбираете неправильный подход.

Вам следует один раз связать обработчики наведения и выбрать цвета, в зависимости от которых был нажат.

Самый простой способ, вероятно, хранить данные о цвете в справочной таблице, где ключи - это идентификаторы элементов.

var ids = {
    personal: {
        over:'blue',
        out:'#E4D8B8'
    },
    achievements: {
        over:'red',
        out:'#ffffff'
    },
    skills: {
        over:'orange',
        out:'#dddddd'
    }
};
var current = ids.personal;

Затем свяжите обработчики один раз и используйте id из того, который щелкнул, чтобы установить current набор цветов.

var scroll_anchors = $(".scrolltoanchor");

scroll_anchors.hover( function() {
    $(this).css( 'color', current.over );
},function(){
    $(this).css( 'color', current.out );
});

scroll_anchors.click(function() {
     $('a.selected').removeClass('selected');
     $(this).addClass('selected');

     $.scrollTo($($(this).attr("href")), { duration: 750 });

     current = ids[ this.id ]; // set the current color set based on the ID

     scroll_anchors.animate({ color: current.out });

     return false;
});
2 голосов
/ 09 декабря 2011

Когда вы вызываете .hover() несколько раз, вы не удаляете старые обработчики событий, вы просто добавляете новый. Каждый обработчик будет вызываться каждый раз. Сначала вы захотите позвонить .unbind("hover"):

$(".scrolltoanchor").unbind("hover").hover(function () {
    ...
});

Вы также можете привязать указатель мыши к параметру switch, чтобы устранить дублирование кода:

$(".scrolltoanchor").click(function () {
    $('a').removeClass('selected');
    $(this).addClass('selected');
    $.scrollTo($(this.href), {
        duration: 750
    });
   var off, on;
    switch (this.id) {
        case 'personal':
            off = '#E4D8B8';
            on = 'blue';
            break;
        case 'achievements':
            off = '#ffffff';
            on = 'red';
            break;
        case 'skills':
            off = '#dddddd';
            on = 'orange';
            break;
    }

    $('.scrolltoanchor')
        .animate({ color: off })
        .unbind("hover")
        .hover(function () {
            $(this).css('color', on);
        }, function () {     
            $(this).css('color', off);
        });

    return false;
});
...