Comment faire basculer la classe d'un élément en JavaScript pur ?

Question

Je cherche un moyen de convertir ce code jQuery (qui est utilisé dans la section menu réactif) en JavaScript pur.

S'il est difficile à mettre en œuvre, vous pouvez utiliser d'autres cadres JavaScript.

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

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

Answer 1

Si quelqu'un cherche à faire basculer la classe au passage de la souris ou au départ de la souris en utilisant le Javascript, voici le code pour cela

function changeColor() {
    this.classList.toggle('red');
    this.classList.toggle('green');
}

 document.querySelector('#btn').addEventListener('mouseenter', changeColor);
 document.querySelector('#btn').addEventListener('mouseleave', changeColor );

Lien vers le violon de démonstration : https://jsfiddle.net/eg2k7mLj/1/

Source : Classe Toggle (basée sur Javascript, sans jQuery)

Answer 2

C'est peut-être plus succinct :

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 3

Juste pour des raisons d'héritage :

function toggleClassName(elementClassName, className) {
    const originalClassNames = elementClassName.split(/\s+/);
    const newClassNames = [];
    let found = false;
    for (let index = 0; index < originalClassNames.length; index++) {
        if (originalClassNames[index] === '') {
            continue;
        }
        if (originalClassNames[index] === className) {
            found = true;
            continue;
        }
        newClassNames.push(originalClassNames[index]);
    }
    if (!found) {
        newClassNames.push(className);
    }

    return newClassNames.join(' ');
}

console.assert(toggleClassName('', 'foo')                        === 'foo');
console.assert(toggleClassName('foo', 'bar')                     === 'foo bar');
console.assert(toggleClassName('foo bar', 'bar')                 === 'foo');
console.assert(toggleClassName('bar foo', 'bar')                 === 'foo');
console.assert(toggleClassName('foo bar baz', 'bar')             === 'foo baz');
console.assert(toggleClassName('foo-bar', 'foo')                 === 'foo-bar foo');
console.assert(toggleClassName('bar foo-bar', 'bar')             === 'foo-bar');
console.assert(toggleClassName('bar bar bar foo-bar bar', 'bar') === 'foo-bar');
console.assert(toggleClassName(" \n\nbar-bar \nbar-baz foo", 'bar-baz') === 'bar-bar foo');

element.className = toggleClassName(element.className, 'foo');

Answer 4

Essayez ceci (avec un peu de chance, cela fonctionnera) :

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

Si vous souhaitez faire basculer une classe vers un élément en utilisant une solution native, vous pouvez essayer cette suggestion. Je l'ai testée dans différents cas, avec ou sans d'autres classes sur l'élément, et je pense qu'elle fonctionne assez bien :

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