web-dev-qa-db-ja.com

クラス名onclickJavaScriptを切り替えます

私はもうすぐそこにいますが、コードの設定については少しわかりません。基本的に、クリック時にクラスを削除し、onclickに再度追加し、次にonclickを削除してから、onclickを追加します。等々！これが私が持っているものです、それはほぼそこにあります、しかしこれをするより良い方法があれば助けてください！ありがとうございました。

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

どんな助けでも大歓迎です！

javascripttoggle
8
user1323595

三項演算子を使用する場合は、次を使用します。

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

私は本当に誰も言及していないことに驚いています classList ここに。したがって、完全を期すために、別の解決策は、classListメソッドtoggle（）を使用することです。

その場合、あなたのケースは単純に次のようになります。

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

e.classList.toggle（）は適切にサポートされています（ただし、ehm、IE、IE10以降にあります）。 ここをクリック 完全なブラウザ互換性のため。

42
kecer

JQueryがあなたにとって大丈夫なら、それは本当に同じくらい簡単です

$(myButton).toggleClass('active')

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

3
bikeshedder

トグルクラスメソッドの一般的な実現を提案します。

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

配列メソッドを使用した実装：

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

プランカー

0
Steve Brush