Форум Сайтостроение Веб-строительство

Не понимаю, почему не срабатывает подмена классов

P
На сайте с 06.01.2009
Offline
601
postavkin
534

Здравствуйте. Подскажите, пож-та, не могу понять, почему при первом клике h3 меняется в active, а при клике втором, не возвращается в noactive ?

спасибо

html 


<div class="accordion">

<h3 class="noactive">форма фильтрации товаров</h3>

<div class="mess invisible">

</div>

</div>

js 


$(".accordion h3.noactive").click(function(){

  $(this).removeClass("noactive").addClass("active");

});



$(".accordion h3.active").click(function(){

  $(this).removeClass("active").addClass("noactive");

});

css 


.mess.invisible {max-height: 30px; overflow-y: hidden;} 

.mess.visible {max-height: auto; overflow-y: hidden;} 

.accordion h3.noactive {color:red;}

.accordion h3.active {color:green;}
S
На сайте с 30.09.2016
Offline
469
Sitealert
#1

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

$(".accordion h3").click(function(){

  if($(this).attr("class")=="noactive"){$(this).removeClass("noactive").addClass("active");}

  else if($(this).attr("class")=="active"){$(this).removeClass("active").addClass("noactive");}

});
Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
D
На сайте с 14.01.2007
Offline
153
Dinozavr
#2

либо так:


$('.accordion').delegate('h3.noactive', 'click', function(){
  $(this).removeClass("noactive").addClass("active");
});

$('.accordion').delegate('h3.active', 'click', function(){
  $(this).removeClass("active").addClass("noactive");
});
P
На сайте с 06.01.2009
Offline
601
postavkin
#3

Друзья, спасибо большое!!!

S
На сайте с 30.09.2016
Offline
469
Sitealert
#4

Метод хороший, но зависит от версии, насколько я понял

As of jQuery 3.0, .delegate() has been deprecated
За что я недолюбливаю Jquery, так это за его постоянные фокусы со сменой методов в разных версиях.:o Всё время проверяться надо.
tommy-gung
На сайте с 22.11.2006
Offline
304
tommy-gung
#5
Sitealert:
$(this).attr("class")=="noactive"

лучше проверять на .hasClass('noactive')

Здесь не могла быть ваша реклама
S
На сайте с 30.09.2016
Offline
469
Sitealert
#6

Согласен. На случай, если будет пристёгнуто несколько классов.

ДП
На сайте с 23.11.2009
Offline
203
Дикий пионер
#7
postavkin:
Здравствуйте. Подскажите, пож-та, не могу понять, почему при первом клике h3 меняется в active, а при клике втором, не возвращается в noactive ?
спасибо
js

$(".accordion h3.noactive").click(function(){
  $(this).removeClass("noactive").addClass("active");
});

$(".accordion h3.active").click(function(){
  $(this).removeClass("active").addClass("noactive");
});

Потому что в момент, когда выполняется этот код у вас селектор


$(".accordion h3.noactive")

элемент выберет, а селектор


$(".accordion h3.active")
- не выберет

так как класс active еще не назначен.

Собственно решения вам уже подсказали.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий