jQuery에서 2 개의 클래스를 토글하는 가장 쉬운 방법

클래스 .A와 클래스 .B가 있고 버튼 클릭간에 전환하려면 jQuery에서 좋은 해결책은 무엇입니까? 나는 아직도 어떻게 toggleClass()작동 하는지 이해하지 못한다 .

onclick=""이벤트 에 넣을 수있는 인라인 솔루션이 있습니까?

요소 A가 처음부터 클래스 를 노출하면 다음 과 같이 쓸 수 있습니다.

$(element).toggleClass("A B");

클래스를 제거하고 클래스 A를 추가합니다 B. 다시 그렇게하면 class가 제거되고 class B가 복원됩니다 A.

두 클래스를 노출하는 요소를 일치 시키려면 여러 클래스 선택기를 사용하여 다음을 작성할 수 있습니다 .

$(".A, .B").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
});

DRY 작업을 위해 jQuery 플러그인을 만들었습니다.

$.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);

또 다른 '전통적인'방법이 있습니다.

• 밑줄 또는 lodash 사용을 의미합니다 .
• 다음과 같은 상황을 가정합니다.
  • 요소에 init 클래스가 없습니다 (즉, toggleClass ( 'a b')를 수행 할 수 없음)
  • 어딘가에서 동적으로 수업을 받아야합니다.

이 시나리오의 예로는 다른 요소 (예 : 컨테이너의 탭)에서 전환 할 클래스가있는 버튼이 있습니다.

// 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 둘 다 토글 할 때마다 시작 한 쪽은 다른 쪽이 나타나도록 남겨 둡니다.

Jquery를 사용하여 두 클래스 'A'와 'B'사이를 전환하십시오.

$ ( '# selecor_id'). toggleClass ( "A B");