Функция jQuery click ведет себя странно при добавлении / удалении классов - PullRequest
Новая
       50

Функция jQuery click ведет себя странно при добавлении / удалении классов

3 голосов
/ 27 января 2012

У меня есть два элемента списка, которые при нажатии должны изменить классы с «.off» на «.on». Только один элемент должен быть «.on» одновременно, поэтому, когда один из них уже включен, а другой нажат, оба элемента должны изменить классы с «.off» на «.on» и наоборот. Если щелкнуть элемент списка с классом «.on», он должен изменить классы на «.off»

Проблема, с которой я столкнулся, заключается в том, что при нажатии элемента списка с классом «.on» он по-прежнему выполняет функцию щелчка, как если бы он имел класс «.off»

Мой HTML: 

<ul>
    <li><a href="about" class="off">ABOUT</a></li>
    <li><a href="upload" class="off">SUBMIT</a></li>
</ul>

Мой JavaScript (работает на jQuery 1.7.1) 

$('.off').click(function(event) {
    event.preventDefault();
    $(".on").addClass("off").removeClass("on");
    $(this).addClass("on").removeClass("off");
});
$('.on').click(function(event) {
    event.preventDefault();
    $(this).addClass("off").removeClass("on");
});

Кто-нибудь знает, что здесь происходит? Что-то не так в моем коде или я столкнулся с какой-то ошибкой здесь?

http://jsfiddle.net/ZC3CW/6/

Ответы [ 5 ]

4 голосов
/ 27 января 2012

Селекторы, которые вы используете для привязки события с помощью click(), используются для выбора элементов, к которым нужно добавить обработчик события.Селектор не учитывается при запуске обработчика.

Вы должны искать что-то похожее на это: 

$('li').click(function(event) {
    event.preventDefault();

    if ($(this).hasClass('off')) {
        $(".on").addClass("off").removeClass("on");
        $(this).addClass("on").removeClass("off");
    } else { // $(this).hasClass('on');
        $(this).addClass("off").removeClass("on");
    }
});

Возможно, вы захотите сделать селектор li более явным, добавив класс / идентификатор к ul или li s.

Чтобы еще больше запутать вещи, вы также можете сделать это (если вы используете jQuery> 1.7); 

$(document).on('click', '.off', function(event) {
    event.preventDefault();
    $(".on").addClass("off").removeClass("on");
    $(this).addClass("on").removeClass("off");
});
$(document).on('click', '.on', function(event) {
    event.preventDefault();
    $(this).addClass("off").removeClass("on");
});

Это потому, что функция .on() работаетприсоединяя обработчик события к выбранным элементам (document), и будет выполнять обработчик (функцию) только для указанного события (click), если элемент, из которого произошло событие, соответствует селектору .off во время события, а не во время привязки .

2 голосов
/ 27 января 2012

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

$("ul li a").click(function(e){
   e.preventDefault();

   if($(this).hasClass("off")){
      $("ul li a").addClass("off").removeClass("on");
      $(this).addClass("on").removeClass("off");
   }
   else{
      $(this).addClass("off").removeClass("on");
   }
});
1 голос
/ 27 января 2012

Проблема в том, что обработчики jQuery прикрепляются при загрузке страницы и остаются неизменными независимо от изменения их классов. Используйте live ('click', обработчик) on ('click', обработчик) вместо click ().

Редактировать: только что заметил, что .live () устарела в jQuery 1.7.

0 голосов
/ 27 января 2012

Клик привязан к элементу, а не к классу. Возможно, вы можете прикрепить события к элементам

и обнаружить / переключить классы элементов: 
$('li').click(function(event) {
    event.preventDefault();
    if( $(this).hasClass('on') ) {
        $(this).removeClass('on');
    }
    else {
        $(this).addClass('on');
        $(this).siblings().removeClass('on');
    }
});
0 голосов
/ 27 января 2012

Проблема, как я вижу, состоит в том, что ваш класс "on" не находится в игре во время события click, поэтому ваш $('.on').click метод никогда не вызывается.

Попробуйте переназначить вашсобытия после смены классов (пример следующий): 

var assignClicks = function () {
    $('.off').click(function(event) {
        event.preventDefault();
        $(".on").addClass("off").removeClass("on");
        $(this).addClass("on").removeClass("off");
        assignClicks();
    });
    $('.on').click(function(event) {
        event.preventDefault();
        $(this).addClass("off").removeClass("on");
        assignClicks();
    });
};
assignClicks();

Надеюсь, это поможет,

Пит

...