Якщо у мене є клас .A і клас .B і хочу переключитися між натисканням кнопки, яке приємне рішення для цього в jQuery? Я досі не розумію, як це toggleClass()
працює.
Чи є вбудоване рішення, щоб його застосувати onclick=""
?
Якщо у мене є клас .A і клас .B і хочу переключитися між натисканням кнопки, яке приємне рішення для цього в jQuery? Я досі не розумію, як це toggleClass()
працює.
Чи є вбудоване рішення, щоб його застосувати onclick=""
?
Відповіді:
Якщо ваш елемент відкриває клас A
з самого початку, ви можете написати:
$(element).toggleClass("A B");
Це видалить клас A
та додасть клас B
. Якщо ви зробите це ще раз, він видалить клас B
та відновить клас A
.
Якщо ви хочете відповідати елементам, які відкривають будь-який клас, ви можете скористатися селектором декількох класів і написати:
$(".A, .B").toggleClass("A B");
var $trigger = $(".A"); $trigger.on("click", function() {$trigger.toggleClass("A B")});
Ось спрощена версія: ( хоч і не елегантна, але зручна у виконанні )
$("#yourButton").toggle(function()
{
$('#target').removeClass("a").addClass("b"); //Adds 'a', removes 'b'
}, function() {
$('#target').removeClass("b").addClass("a"); //Adds 'b', removes 'a'
});
Як варіант, подібне рішення:
$('#yourbutton').click(function()
{
$('#target').toggleClass('a b'); //Adds 'a', removes 'b' and vice versa
});
toggle
оприлюднений у jquery 2.0
Я створив плагін jQuery для роботи DRY:
$.fn.toggle2classes = function(class1, class2){
if( !class1 || !class2 )
return this;
return this.each(function(){
var $elm = $(this);
if( $elm.hasClass(class1) || $elm.hasClass(class2) )
$elm.toggleClass(class1 +' '+ class2);
else
$elm.addClass(class1);
});
};
Ви можете просто спробувати тут, скопіювати та запустити це на консолі, а потім спробувати:
$('body').toggle2classes('a', 'b');
Ваш onClick
запит:
<span class="A" onclick="var state = this.className.indexOf('A') > -1; $(this).toggleClass('A', !state).toggleClass('B', state);">Click Me</span>
Спробуйте: https://jsfiddle.net/v15q6b5y/
Просто JS à la jQuery :
$('.selector').toggleClass('A', !state).toggleClass('B', state);
Ось ще один «нетрадиційний» спосіб.
Прикладом цього сценарію можуть бути кнопки, які мають клас перемикання на інший елемент (скажімо, вкладки в контейнері).
// 1: define the array of switching classes:
var types = ['web','email'];
// 2: get the active class:
var type = $(mybutton).prop('class');
// 3: switch the class with the other on (say..) the container. You can guess the other by using _.without() on the array:
$mycontainer.removeClass(_.without(types, type)[0]).addClass(type);
Найпростіше рішення - це toggleClass()
обидва класи індивідуально.
Скажімо, у вас є ікона:
<i id="target" class="fa fa-angle-down"></i>
Для перемикання між режимами fa-angle-down
і fa-angle-up
виконайте наступні дії :
$('.sometrigger').click(function(){
$('#target').toggleClass('fa-angle-down');
$('#target').toggleClass('fa-angle-up');
});
Оскільки у нас було fa-angle-down
на початку без fa-angle-up
кожного перемикання обох, один залишає, щоб з’явився другий.
Перемикайтеся між двома класами "A" і "B" за допомогою Jquery.
$ ('# selecor_id'). toggleClass ("A B");
onclick=""
) поганий. чому б ви не використовували jQuery для реєстрації належного обробника подій (або делегата / події в реальному часі, якщо у вас багато елементів з тим самим обробником)