10

私はもうすぐそこにいますが、コードの設定については少しわかりません。基本的に、クリック時にクラスを削除し、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, '') ;
}

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

4

5 に答える 5

64

ここで誰もclassListについて言及していないことに本当に驚いています。完成させるために：別の解決策は、 classList メソッドのtoggle()を使用することです。

あなたの場合は、単に次のようになります。

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

e.classList.toggle() は適切にサポートされています (ただし、えーと、IE を除きます。IE10 以降にあります)。ブラウザの完全な互換性については、ここをクリックしてください。

于 2015-12-29T16:17:35.503 に答える
16

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

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/

于 2013-01-30T23:24:19.273 に答える
3

JQueryがあなたにとって大丈夫なら、それは本当に次のように簡単です

$(myButton).toggleClass('active')

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

于 2013-01-30T23:24:53.760 に答える
0

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');
于 2015-09-04T16:41:44.677 に答える