วิธีที่ง่ายที่สุดในการสลับ 2 คลาสใน 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
});

ฉันได้ทำปลั๊กอิน 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);

นี่เป็นอีกวิธีที่ "ไม่ธรรมดา"

• มันแสดงถึงการใช้งานของขีดหรือlodash
• มันถือว่าบริบทที่คุณ:
  • องค์ประกอบไม่มีคลาสเริ่มต้น (ซึ่งหมายความว่าคุณไม่สามารถทำ 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เวลาที่คุณสลับทั้งสองอย่างหนึ่งจะปล่อยให้อีกอันปรากฏ

สลับไปมาระหว่างสองคลาส 'A' และ 'B' กับ Jquery

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