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

Question

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

क्या इसे onclick=""घटना में डालने का कोई इनलाइन समाधान है ?

Comments

इनलाइन JS ( onclick="") खराब है। आप एक उचित ईवेंट हैंडलर (या एक डेलीगेट / लाइव इवेंट रजिस्टर करने के लिए jQuery का उपयोग क्यों नहीं करते हैं यदि आपके पास एक ही हैंडलर के बहुत सारे तत्व हैं)

— ThiefMaster

Answer 1

यदि आपका तत्व Aशुरू से ही कक्षा को उजागर करता है , तो आप लिख सकते हैं:

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

यह क्लास को हटा देगा Aऔर क्लास को जोड़ देगा B। यदि आप फिर से ऐसा करते हैं, तो यह कक्षा को हटा देगा Bऔर कक्षा को बहाल कर देगा A।

यदि आप उन तत्वों से मेल खाना चाहते हैं जो या तो वर्ग को उजागर करते हैं, तो आप एक से अधिक वर्ग चयनकर्ता का उपयोग कर सकते हैं और लिख सकते हैं:

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

Comments

क्या होगा अगर तत्व के बजाय मैं राज्य के आधार पर कक्षा ए या बी रखना चाहता हूं?

— स्टीवी ग्रिफिन

इस बात से अवगत रहें कि आपको हर बार उन तत्वों का चयन करने के बजाय जिस वस्तु को टॉगल करने की कोशिश की जा रही है, उसे कैश करना चाहिए, टॉगल वर्गों के लिए सबसे सामान्य उपयोग एक क्लिक हैंडलर में किया जा रहा है। var $trigger = $(".A"); $trigger.on("click", function() {$trigger.toggleClass("A B")});

— मम्मीबोट

@ मम्मीबोट - कृपालु के रूप में ध्वजांकित। Frédéric - क्या होगा यदि तत्व में "शुरू से" कोई वर्ग नहीं है? यह एक महत्वपूर्ण राज्य भी है।

— बनाम

यह अब काम नहीं करता है। अब एक ही समय में दोनों वर्गों को जोड़ता है और हटाता है।

— फाबियान

@ Frédéric Hamidi मुझे नहीं पता कि मैंने क्या गलत किया, लेकिन जब मैंने कोशिश की तो यह काम नहीं कर रहा था। अब ठीक लगता है। मेरे मामले में, इसने एक ही समय में दोनों वर्गों को जोड़ा और हटाया लेकिन अब यह काम कर रहा है। संभवतः मैंने कुछ और गड़बड़ कर दी और इस समारोह को प्रभावित किया। मैंने अपनी टिप्पणी हटा दी। गलतफहमी के लिए खेद है।

— बुरकुआदा

Answer 2

यहाँ एक सरलीकृत संस्करण है: ( यद्यपि सुरुचिपूर्ण नहीं है, लेकिन आसान करने के लिए अनुसरण करें )

$("#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
});

Comments

मैं इस तरीके का उपयोग करने के लिए toggle2.0 jquery में

— वंचित है

धन्यवाद विट्टोर यह स्पष्ट रूप से 2011 से एक पुराना जवाब है। मैंने तदनुसार सिंटैक्स को अपडेट किया है।

— रियान विलियम्स

Answer 3

मैंने काम करने के लिए 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');

Answer 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);

Answer 5

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

• इसका तात्पर्य अंडरस्कोर या लॉश के उपयोग से है ।
• यह एक संदर्भ मानता है कि आप कहां हैं:
  • तत्व में एक 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);

Answer 6

सबसे आसान समाधान 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हर बार जब आप दोनों टॉगल करते हैं, तो एक दूसरे को दिखाई देने के लिए छोड़ देता है।

Answer 7

Jquery के साथ दो वर्गों 'ए' और 'बी' के बीच टॉगल करें।

$ ('# selecor_id')। toggleClass ("ए बी");