JQuery में 2 कक्षाओं को टॉगल करने का सबसे आसान तरीका




toggleclass (4)

आपका 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/

बस जेएस à ला jQuery :

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

अगर मेरे पास कक्षा है। और कक्षा बी। और बटन क्लिक के बीच स्विच करना चाहते हैं, तो jQuery में इसके लिए एक अच्छा समाधान क्या है? मुझे अभी भी समझ में नहीं आता कि toggleClass() कैसे काम करता है।

क्या इसे onclick="" ईवेंट में रखने के लिए एक इनलाइन समाधान है?


मैंने 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');

यहां एक और 'गैर परंपरागत' तरीका है।

  • यह underscore या lodash के उपयोग का तात्पर्य है।
  • यह एक संदर्भ मानता है जहां आप:
    • तत्व में एक init वर्ग नहीं है (जिसका अर्थ है कि आप टॉगल क्लास ('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 बिना हर बार जब आप दोनों टॉगल करते हैं, तो दूसरे के लिए एक पत्तियां दिखाई देती हैं।





toggleclass