it-swarm.com.de

Wie kann ich die Klasse eines Elements in reinem JavaScript umschalten?

Ich bin auf der Suche nach einer Möglichkeit, diesen jQuery-Code (der im Abschnitt "Reaktionsfähiges Menü" verwendet wird) in reines JavaScript zu konvertieren.

Wenn die Implementierung schwierig ist, können andere JavaScript-Frameworks verwendet werden.

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

    if (typeof masonryGallery != 'undefined') 
        masonryGallery();
});
99
max imax

2014 answer : classList.toggle() ist der Standard und wird von den meisten Browsern unterstützt .

Ältere Browser können classlist.js für classList.toggle () verwenden :

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

Abgesehen davon sollten Sie keine IDs verwenden ( sie lecken globale Daten in das JS window -Objekt ).

170
mikemaccana

Schauen Sie sich dieses Beispiel an: 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;
}
10

Hier ist die Lösung mit ES6 implementiert

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

anwendungsbeispiel

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

Dieser funktioniert in früheren Versionen von IE auch.

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>
4
RRK

Das ist vielleicht prägnanter:

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

Versuchen Sie dies (hoffentlich wird es funktionieren):

// 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
Rajbir Sharma

Wenn Sie eine Klasse mit der nativen Lösung auf ein Element umschalten möchten, können Sie diesen Vorschlag ausprobieren. Ich habe es in verschiedenen Fällen probiert, mit oder ohne andere Klassen für das Element, und ich denke, es funktioniert ziemlich gut:

(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
Christiyan