Geek asks and answers

Toggle onclick javascript class name

I'm almost there, a little unsure of my code setup, I basically want to remove the class on click and add it to onclick again, then delete onclick and then add onclick. Etc! Here, what I have is almost there, but if there is a better way to do this, then please help! Thank.

document.getElementById('myButton').onclick = function() {
    myButton.className = myButton.className.replace(/(?:^|\s)active(?!\S)/g, '') ? 'active': jbar.className.replace(/(?:^|\s)active(?!\S)/g, '') ;
}

Any help is much appreciated!

+5
source share
5 answers

If you want to use the ternary operator, use this:

document.getElementById('myButton').onclick = function() {

    var className = ' ' + myButton.className + ' ';

    this.className = ~className.indexOf(' active ') ?
                         className.replace(' active ', ' ') :
                         this.className + ' active';
}

For clarity, I would use regular if / else:

document.getElementById('myButton').onclick = function() {

    var className = ' ' + myButton.className + ' ';

    if ( ~className.indexOf(' active ') ) {
        this.className = className.replace(' active ', ' ');
    } else {
        this.className += ' active';
    }              
}

Here's the fiddle: http://jsfiddle.net/ttEGY/

+13
source

, classList . : classList toggle().

:

document.getElementById('myButton').onclick = function() {
    this.classList.toggle('active');
}

e.classList.toggle() ( , ehm, IE, It IE10). .

+25

JQuery , ,

$(myButton).toggleClass('active')

http://jsfiddle.net/bikeshedder/eRJB4/

+3

toggleClass:

function toggleClass(element, tClass) {
    tClass = tClass.replace(/\s/g, "");

    var classes =  element.className;
    element.className = classes.indexOf(tClass) !== -1 
        ? classes.replace(" " + tClass, "")
        : classes + " " + tClass;
}

:

var element = document.getElementById('myId');
toggleClass(element, 'active');
0

Array:

const toggleClass = (element, className) => {
  let classNames = element.className.split(' ');
  let index = classNames.indexOf(className);
  if (index === -1) {
    classNames.push(className);
  } else {
    classNames.splice(index, 1);
  }
  element.className = classNames.filter(item => item !== '').join(' ');
}

:

let body = document.getElementsByTagName('body')[0];
toggleClass(body, 'ready');

Plunker

0

More articles:


All Articles