클래스 .A와 클래스 .B가 있고 버튼 클릭간에 전환하려면 jQuery에서 좋은 해결책은 무엇입니까? 나는 아직도 어떻게 toggleClass()작동 하는지 이해하지 못한다 . title=""이벤트 에 넣을 수있는 인라인 솔루션이 있습니까? 요소 A가 처음부터 클래스 를 노출하면 다음 과 같이 쓸 수 있습니다. 클래스를 제거하고 클래스 A를 추가합니다 B. 다시 그렇게하면 class가 제거되고 class B가 복원됩니다 A. 두 클래스를 노출하는 요소를 일치 시키려면 여러 클래스 선택기를 사용하여 다음을 작성할 수 있습니다 .답변
답변
다음은 단순화 된 버전입니다. ( 우아하지는 않지만 따르기 쉬운 )
$("#yourButton").toggle(function() { $('#target').removeClass("a").addClass("b"); //Adds 'a', removes 'b' }, function() { $('#target').removeClass("b").addClass("a"); //Adds 'b', removes 'a' });또는 비슷한 솔루션 :
답변
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" title="var state = this.className.indexOf('A') > -1; $(this).toggleClass('A', !state).toggleClass('B', state);">Click Me</span>사용해보십시오 : //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”);