Я почти на месте, просто немного не уверен в настройке своего кода, я хочу удалить класс по щелчку и снова добавить его снова по клику, затем удалить по клику, а затем добавить по клику. И так далее! Вот что у меня есть, это почти там, но если есть более хороший способ сделать это, то, пожалуйста, помогите! Спасибо.

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

Любая помощь очень ценится!

9
user1323595 31 Янв 2013 в 03:20

5 ответов

Лучший ответ

Если вы хотите использовать троичный оператор, используйте это:

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

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

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

Для ясности, я бы использовал обычный if / else:

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

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

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

Вот скрипка: http://jsfiddle.net/ttEGY/

16
Joseph Silber 30 Янв 2013 в 23:35

Я действительно удивлен, что никто не упомянул здесь classList. Так что просто для завершения: альтернативным решением будет использование метода classList toggle () .

Ваш случай будет тогда просто:

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

E.classList.toggle () имеет хорошую поддержку (за исключением, IE, он существует с IE10). Нажмите здесь для полной совместимости браузера.

45
kecer 29 Дек 2015 в 16:17

Реализация с использованием методов 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
Steve Brush 31 Янв 2017 в 16:47

Предложите общую реализацию метода 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
BotanMan 4 Сен 2015 в 16:41

Если JQuery хорошо для вас, это действительно так просто, как

$(myButton).toggleClass('active')

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

3
bikeshedder 30 Янв 2013 в 23:24