मैं शुद्ध जावास्क्रिप्ट में एक तत्व वर्ग को कैसे टॉगल करूं?

Question

मैं इस jQuery कोड (जो उत्तरदायी मेनू अनुभाग में उपयोग किया जाता है) को शुद्ध जावास्क्रिप्ट में बदलने का एक रास्ता खोज रहा हूं।

यदि इसे लागू करना कठिन है तो अन्य जावास्क्रिप्ट फ्रेमवर्क का उपयोग करना ठीक है।

$('.btn-navbar').click(function()
{
    $('.container-fluid:first').toggleClass('menu-hidden');
    $('#menu').toggleClass('hidden-phone');

    if (typeof masonryGallery != 'undefined') 
        masonryGallery();
});

Comments

stackoverflow.com/questions/195951/…

— जोहान

document.getElementById("menu").classList.toggle("hidden-phone"):-)

— बर्गी १gi

classList कुछ ब्राउज़रों द्वारा समर्थित नहीं है: caniuse.com/classlist

— केविन

अरे @ मोम, पहले से ही एक जवाब चुनना चाहते हैं?

— मिकमेकाना

Answer 1

2014 का उत्तर : classList.toggle()अधिकांश ब्राउज़रों द्वारा मानक और समर्थित है ।

पुराने ब्राउज़र classList.toggle () के लिए classlist.js का उपयोग कर सकते हैं :

var menu = document.querySelector('.menu') // Using a class instead, see note below.
menu.classList.toggle('hidden-phone');

एक तरफ के रूप में, आपको आईडी का उपयोग नहीं करना चाहिए ( वे JS windowऑब्जेक्ट में ग्लोबल्स को लीक करते हैं )।

Comments

अगर हम आईडी का उपयोग नहीं कर सकते हैं, तो हम कितना सावधानी रखते हैं?

— गोकू

लेकिन, तब हमारे पास पुरानी आईडी के बजाय समान कक्षाओं की मात्रा होगी, और var myList = document.getEgetsByClassName ("abc") जैसी किसी चीज़ का उपयोग करेंगे?

— गोकु

@goku कक्षाएं विंडो ऑब्जेक्ट के नीचे दिखाई नहीं देती हैं। केवल आईडी करते हैं। देखें 2ality.com/2012/08/ids-are-global.html

— mikemaccana

IE10 और IE11 द्वारा समर्थित दूसरे पैरामीटर को छोड़कर

— रडार

आपको बहुत - बहुत धन्यवाद! यह अब काम कर रहा है :) मैं लूप के लिए अधिक विकल्प जोड़ता हूं: var All = document.querySelectorAll ('। Menu'); for (var i = 0; i <All.length; i ++) {सभी [i] .classList.toggle ('हिडन-फोन'); }

— ब्लू ट्राम

Answer 2

यहाँ समाधान ES6 के साथ लागू किया गया है

const toggleClass = (el, className) => el.classList.toggle(className);

उपयोग उदाहरण

toggleClass(document.querySelector('div.active'), 'active'); // The div container will not have the 'active' class anymore

Comments

ES6 बहुत अच्छा है, लेकिन यह समाधान केवल अन्य मौजूदा उत्तरों के अनुसार 'document.querySelector' और 'element.classList.toggle' का उपयोग कर रहा है।

— मिकमेकाना

कोई समाधान मान्य नहीं है यदि यह "विक्रेता उन्मुख" है, तो इंटरनेट खुले-मानक-उन्मुख है ।

— पीटर क्रस

यह फ़ाइलों की भीड़ के लिए एक समाधान नहीं है। querySelectorAll (FF में कम से कम) के साथ काम नहीं करता है, इसलिए उन लोगों के लिए, जो कई तत्वों पर टॉगल कक्षाओं को पढ़ते हैं :-) (मैंने पहले नहीं पढ़ा था - इस प्रकार मेरी टिप्पणी!)

— kev1807

Answer 3

इस उदाहरण पर एक नज़र डालें: JS Fiddle

function toggleClass(element, className){
    if (!element || !className){
        return;
    }

    var classString = element.className, nameIndex = classString.indexOf(className);
    if (nameIndex == -1) {
        classString += ' ' + className;
    }
    else {
        classString = classString.substr(0, nameIndex) + classString.substr(nameIndex+className.length);
    }
    element.className = classString;
}

Comments

क्या होगा अगर मैं "redOther" नाम के "लाल" के बाद एक वर्ग था?

— टिफ़नी लोव

Answer 4

यह IE के पुराने संस्करणों में भी काम करता है।

function toogleClass(ele, class1) {
  var classes = ele.className;
  var regex = new RegExp('\\b' + class1 + '\\b');
  var hasOne = classes.match(regex);
  class1 = class1.replace(/\s+/g, '');
  if (hasOne)
    ele.className = classes.replace(regex, '');
  else
    ele.className = classes + class1;
}

.red {
  background-color: red
}
div {
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
  border: 1px solid black;
}

<div class="does red redAnother " onclick="toogleClass(this, 'red')"></div>

<div class="does collapse navbar-collapse " onclick="toogleClass(this, 'red')"></div>

Comments

\bशब्द सीमा सीएसएस वर्ग नाम सेपरेटर के अनुरूप नहीं है। उदाहरण के लिए यह काम नहीं करता है अगर वर्ग के नाम में डैश ("-") चार: बीटीएन, बीटीएन-रेड दोनों मैच होंगे '\\b' + 'btn' + '\\b'!!

— S.Serpooshan

Answer 5

यह शायद अधिक रसीला है:

function toggle(element, klass) {
  var classes = element.className.match(/\S+/g) || [],
      index = classes.indexOf(klass);

  index >= 0 ? classes.splice(index, 1) : classes.push(klass);
  element.className = classes.join(' ');
}

Answer 6

यह कोशिश करो (उम्मीद है कि यह काम करेगा):

// mixin (functionality) for toggle class 
function hasClass(ele, clsName) {
    var el = ele.className;
    el = el.split(' ');
    if(el.indexOf(clsName) > -1){
        var cIndex = el.indexOf(clsName);
        el.splice(cIndex, 1);
        ele.className = " ";
        el.forEach(function(item, index){
          ele.className += " " + item;
        })
    }
    else {
        el.push(clsName);
        ele.className = " ";
        el.forEach(function(item, index){
          ele.className += " " + item;
        })
    }
}

// get all DOM element that we need for interactivity.

var btnNavbar =  document.getElementsByClassName('btn-navbar')[0];
var containerFluid =  document.querySelector('.container-fluid:first');
var menu = document.getElementById('menu');

// on button click job
btnNavbar.addEventListener('click', function(){
    hasClass(containerFluid, 'menu-hidden');
    hasClass(menu, 'hidden-phone');
})`enter code here`

Answer 7

यहाँ IEN = = 9 के लिए एक कोड है वर्ग पर नाम ("") का प्रयोग करके:

function toggleClass(element, className) {
    var arrayClass = element.className.split(" ");
    var index = arrayClass.indexOf(className);

    if (index === -1) {
        if (element.className !== "") {
            element.className += ' '
        }
        element.className += className;
    } else {
        arrayClass.splice(index, 1);
        element.className = "";
        for (var i = 0; i < arrayClass.length; i++) {
            element.className += arrayClass[i];
            if (i < arrayClass.length - 1) {
                element.className += " ";
            }
        }
    }
}

Answer 8

यदि आप मूल समाधान का उपयोग करते हुए किसी वर्ग को एक तत्व को टॉगल करना चाहते हैं, तो आप इस सुझाव को आज़मा सकते हैं। मैंने इसे अलग-अलग मामलों में, तत्व पर या अन्य कक्षाओं के बिना चखा है, और मुझे लगता है कि यह बहुत काम करता है:

(function(objSelector, objClass){
   document.querySelectorAll(objSelector).forEach(function(o){
      o.addEventListener('click', function(e){
        var $this = e.target,
            klass = $this.className,
            findClass = new RegExp('\\b\\s*' + objClass + '\\S*\\s?', 'g');

        if( !findClass.test( $this.className ) )
            if( klass ) 
                $this.className = klass + ' ' + objClass;
            else 
                $this.setAttribute('class', objClass);
        else 
        {
            klass = klass.replace( findClass, '' );
            if(klass) $this.className = klass;
            else $this.removeAttribute('class');
        }
    });
  });
})('.yourElemetnSelector', 'yourClass');