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




dom toggle (8)

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

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

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

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

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


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

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

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

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

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

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

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

कक्षा नाम पर विभाजन ("") का उपयोग कर आईई> = 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 += " ";
            }
        }
    }
}

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 ऑब्जेक्ट में ग्लोबल्स को रिसाव करते window )।


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

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

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

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




toggle