JQuery: использование селектора not (.active) и добавление класса Active к выбранному элементу

Question

Я новичок в Javascript и у меня возникли некоторые проблемы с использованием селектора NOT и добавлением класса во время функции, надеюсь, это кому-нибудь пригодится.

Я создаю небольшую галерею, и моя цель - иметь интерактивную навигацию, однако при нажатии активное изображение будет перенаправлено на другую страницу.

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

    $("ul#mainGallery li:not(.active) a").click(function(){
      var thisListClass = $(this).parent().attr('class');
         var activeListId = $(this).parent().attr('id');
         var newMarginLeft = (activeListId-3) * -200;
         var animateAction = {};
          animateAction['margin-left'] = newMarginLeft + 'px';
        $("ul#mainGallery").animate(animateAction, 1000);
        $('li.active img').animate({width:'100px', height:'100px'},1000)
        $(this + 'img').animate({width:'300px', height:'300px'},1000)
        $(li.active).removeClass('active');
        $(this).parent().addClass('active');
        return false;

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

Редактировать: Я, наверное, должен сказать, в чем проблема ...

Когда активное изображение нажимается, оно переходит по гиперссылке, все хорошо.

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

Answer 1

Вы связываете событие click с $("ul#mainGallery li:not(.active) a") всякий раз, когда запускается этот код (предположительно при загрузке документа). Предметы, которые не активны в этот момент, будут привязаны к этому предмету, и изменение класса впоследствии для других предметов не будет связывать это событие с ними. Вам нужно будет либо изменить способ его привязки, либо проверить внутри функции, есть ли у элемента этот класс.

Примерно так:

$("ul#mainGallery li a").click(function(){
if(!$(this).parent().hasClass('active')){


      var thisListClass = $(this).parent().attr('class');
         var activeListId = $(this).parent().attr('id');
         var newMarginLeft = (activeListId-3) * -200;
         var animateAction = {};
          animateAction['margin-left'] = newMarginLeft + 'px';
        $("ul#mainGallery").animate(animateAction, 1000);
        $('li.active img').animate({width:'100px', height:'100px'},1000)
        $(this + 'img').animate({width:'300px', height:'300px'},1000)
        $('li.active').removeClass('active');
        $(this).parent().addClass('active');
        return false;
}

РЕДАКТИРОВАТЬ, или если вы предпочитаете продолжать использовать тот же селектор с :not и всем, затем переключите вашу функцию click на .live()

Answer 2

Чтобы остановить поведение по умолчанию, используйте функцию warnDefault ()

$("ul#mainGallery li:not(.active) a").click(function(e){
   e.preventDefault(); // will stop the default behaviour
}

Подробнее о Документация Jquery