проблема класса jquery css

Question

Есть 2 класса для одного тега

. класс .bt1 установлен по умолчанию в HTML-код.

Мне нужен этот тег p, чтобы изменить его класс по щелчку и сохранить его, а когда я щелкаю по этому тегу p, он должен быть классом 'bt1i' и функция onclick 'bt1i' начала работать. Может кто-нибудь помочь мне понять, почему это не работает и где ошибка. Как я понимаю, когда я изменяю класс в коде jquery, он не сохраняется для следующего вызова jquery.

jQuery(document).ready(function(){

  $(".slide1").animate({marginRight:"-446px"}, 500 );
  $(".commonslide").animate({width:"206px", opacity:0}, 400 );
  $(".mainarea").animate({marginRight:"206px"}, 500);



 $(".bt1").click(function(){ 
     $(this).toggleClass("bt1i");
  $(".mainarea").animate({marginRight:"652px"}, 400);
  $(".sidebar").animate({marginRight:"0px"}, 400 );
        $(".slide1").animate({marginRight:"0px"}, 400 );
  $(".commonside").animate({width:"652px", opacity:1}, 400 );
 });




 $(".bt1i").click(function(){
  $(".slide1").animate({marginRight:"-446px"}, 500 );  
  $(".commonside").animate({width:"206px", opacity:1}, 400 );
  $(".mainarea").animate({marginRight:"206px"}, 500);
     $(this).toggleClass("bt1");  
 });


});

Answer 1

Ответ Ника правильный.Вот еще одно решение:

$(".bt1").click(function () {
    if ($(this).hasClass("bt1i")) {
        // add behavior for the bt1i class here
    }
    $(this).toggleClass("bt1i");
}

Причина, по которой у вас возникла проблема, заключается в том, что функция .click () jQuery связывает обработчик только с элементами, которые в настоящее время имеют класс bt1i.Поскольку класс не будет добавлен до тех пор, пока обработчик не будет привязан ни к чему.

Answer 2

Вам необходимо изменить обработчик .bt1i для работы через .live(), например:

$(".bt1").live('click', function(){ 
//and...
$(".bt1i").live('click', function(){

Когда вы делаете $(".bt1i").click(...), он ищет элементы с классомиз bt1i в то время и привязки к ним обработчика click ... элементы, на которых вы переключаете класс, не имели класса , тогда .С .live() он будет прослушивать или элементы с этим классом, независимо от того, когда они были добавлены ... селектор оценивается в момент возникновения события.

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

$(this).toggleClass("bt1 bt1i");

Это эффективно поменяет класс наэлемент.