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


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

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

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

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

अग्रिम में धन्यवाद


76
2017-09-18 19:39


मूल


stackoverflow.com/questions/195951/... - Johan
document.getElementById("menu").classList.toggle("hidden-phone") :-) - Bergi
क्लासलिस्ट कुछ ब्राउज़रों द्वारा समर्थित नहीं है: caniuse.com/classlist - Kevin Whitaker
हे @ मैक्स, पहले से ही एक जवाब चुनना चाहते हैं? - mikemaccana


जवाब:


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

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

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

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


133
2018-04-16 09:40



अगर हम आईडी का उपयोग नहीं कर सकते हैं, तो हम यह कैसे करते हैं? - Goku
@goku: एक वर्ग का उपयोग करें। - mikemaccana
लेकिन, तो हमारे पास पुरानी आईडी के बजाय समान वर्ग मात्रा होगी, और var myList = document.getElementsByClassName ("abc") जैसी कुछ का उपयोग करें? - Goku
@goku कक्षाएं विंडो ऑब्जेक्ट के नीचे दिखाई नहीं देती हैं। केवल आईडी ही करते हैं। देख 2ality.com/2012/08/ids-are-global.html - mikemaccana
दूसरे पैरामीटर को छोड़कर IE10 और IE11 द्वारा समर्थित - Below the Radar


सबसे सरल देशी विधि है Element.classList:

<div class="menu" onclick="javascript: this.classList.toggle('hidden-phone');">

15
2018-02-04 20:56





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

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;
}

10
2017-09-18 19:56



क्या होगा यदि मेरे पास "लाल" नामक "लाल" के बाद एक कक्षा थी? - Tiffany Lowe


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

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>


3
2018-01-15 17:37





यह शायद अधिक संक्षिप्त है:

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(' ');
}

2
2018-04-16 17:32





यहां 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

1
2018-02-23 07:19





इसे आज़माएं (उम्मीद है कि यह काम करेगा):

// 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`

0
2017-11-15 07:51





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

(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');

0
2018-06-26 14:30