jQuery에서 두 클래스를 전환하는 가장 쉬운 방법

jQuery에서 두 클래스를 전환하는 가장 쉬운 방법

수업이 있으면.A반과 반.b와 버튼 클릭 사이를 전환하고 싶은데 jQuery에서 좋은 해결책은 무엇입니까?난 아직도 이해가 안가요toggleClass()작동하다.

그것을 넣을 인라인 솔루션이 있습니까?onclick=""이벤트?

요소가 클래스를 노출하는 경우A처음부터 다음과 같이 적을 수 있습니다.

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

클래스를 제거합니다.A클래스추가B. 다시 그렇게 하면 클래스가 삭제됩니다.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);
  });
};

// usage example:
$(document.body).on('click', () => {
  $(document.body).toggle2classes('a', 'b')
})

body{ height: 100vh }
.a{ background: salmon }
.b{ background: lightgreen }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Click anywhere

당신의.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 à laj Query:

$('.selector').toggleClass('A', !state).toggleClass('B', state);

가장 쉬운 해결책은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둘 다 전환할 때마다 하나는 다른 하나가 나타나도록 합니다.

여기 또 다른 '비관용' 방법이 있습니다.

• 그것은 언더스코어나 로대시의 사용을 암시합니다.
• 다음과 같은 상황을 가정합니다.
  • 요소에 init 클래스가 없습니다(Class('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);

Jquery를 사용하여 두 클래스 'A'와 'B' 사이를 전환합니다.

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

언급URL : https://stackoverflow.com/questions/7002039/easiest-way-to-toggle-2-classes-in-jquery