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




dom toggle (6)

मैं शुद्ध जावास्क्रिप्ट को इस 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;
}

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

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

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

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

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

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>


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

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

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







toggle