をクリックしてを削除する複数のボタンに複数のクラスを追加

私はいくつかのボタンを持っているをクリックしてを削除する複数のボタンに複数のクラスを追加

ユーザーがクリックしたボタンGETクラスactiveなどが削除されます。
本文のクラスのリストを削除します。
ボディのクラスとしてボタンの名前を追加します。

コードは正常に機能します。しかし、私は20のボタンを持っていました。そして、大きなコードになります。私の質問は次のとおりです。私は何をする必要があるのか簡略化する方法がありますか？

私は他の人がstackoverflowに関する質問を見ましたが、私が探しているものが見つかりませんでした。

$("body .buttons div:nth-child(1)").click(function() { $('body').removeClass('A B C D'); $('body').addClass('A'); $('body .buttons div').removeClass('active'); $('body .buttons div:nth-child(A)').addClass('active'); }); $("body .buttons div:nth-child(2)").click(function() { $('body').removeClass('A B C D'); $('body').addClass('B'); $('body .buttons div').removeClass('active'); $('body .buttons div:nth-child(B)').addClass('active'); }); $("body .buttons div:nth-child(3)").click(function() { $('body').removeClass('A B C D'); $('body').addClass('C'); $('body .buttons div').removeClass('active'); $('body .buttons div:nth-child(C)').addClass('active'); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="buttons"> <div class="1">1</div> <div class="2">2</div> <div class="3">3</div> </div>

jsfiddle：http://jsfiddle.net/sthvo31v/

出典

2017-11-01 K. Bert

の下スニペット。 –

しました。それは単なる例です。 –

一連のボタンのHTMLコードも同様に便利です – LinkinTED

私はあなたのコードに変更した：

HTML：

<body> 
<div class="buttons"> 
<div class="1" data-class="A">1</div> 
<div class="2" data-class="B">2</div> 
<div class="3" data-class="C">3</div> 
</div> 
</body>

JS：

を

$(".buttons div").click(function(){ 
    var activeClass = $(".buttons div.active").data("class"); 

    $(".buttons div").removeClass("active"); 
    $(this).addClass("active"); 

    $("body").removeClass(activeClass); 
    $("body").addClass($(this).data("class")); 
});

出典

2017-11-01 13:47:01

パーフェクト！選択したクラスだけが変更されます。魅力のように働いた。ありがとう!!! –

明白な最適化が変わる唯一の事は単一の変数であるとして、あなたのクリック機能の関数を作成しています。

function runActive(x){ 
    $('body').removeClass('1 2 3 D'); 
    $('body').addClass(x); 
    $('body .buttons div').removeClass('active'); 
    $('body .buttons div:nth-child('+x+')').addClass('active'); 
} 

$("body .buttons div:nth-child(1)").click(function() {runActive('1');}); 
$("body .buttons div:nth-child(2)").click(function() {runActive('2');}); 
$("body .buttons div:nth-child(3)").click(function() {runActive('3');}); 
...etc.

出典

2017-11-01 13:21:28 Liam

これはうまくいくはずです。任意の数のボタンで機能します。それは

$(".buttons div").click(function() { 
    var divClass = $(this).attr('class'); 
    $('body').removeClass('1 2 3 D'); 
    $('body').addClass(divClass); 
    $(this).siblings().removeClass('active'); 
    $(this).addClass('active'); 
});

出典

2017-11-01 13:26:52

あなたはこのように、普通のJSでこれを達成できるお試しください：

function buttonClicked() { 
 
    document.querySelectorAll('.myButton').forEach(button => { 
 
    button.classList.remove('active'); 
 
    }); 
 
    
 
    this.classList.add('active'); 
 
} 
 

 
document.querySelectorAll('.myButton').forEach(button => { 
 
    button.onclick = buttonClicked; 
 
});

.active { 
 
    background-color: orangered; 
 
}

<button class="myButton">1</button> 
 
<button class="myButton">2</button> 
 
<button class="myButton">3</button> 
 
<button class="myButton">4</button> 
 
<button class="myButton">5</button> 
 
<button class="myButton">6</button> 
 
<button class="myButton">7</button> 
 
<button class="myButton">8</button> 
 
<button class="myButton">9</button> 
 
<button class="myButton">10</button> 
 
<button class="myButton">11</button> 
 
<button class="myButton">12</button> 
 
<button class="myButton">13</button> 
 
<button class="myButton">14</button> 
 
<button class="myButton">15</button> 
 
<button class="myButton">16</button> 
 
<button class="myButton">17</button> 
 
<button class="myButton">18</button> 
 
<button class="myButton">19</button> 
 
<button class="myButton">20</button>

jqueryのための必要はありません、そしてその非常に速いです。

出典

2017-11-01 13:28:07 Olian04

おそらく初心者の回答ですが、この作業はできますか？

for(i=1; i <= 20; i++) { 
    $("body .buttons div:nth-child(i)").click(function() { 
    for(j=1; j <= 20; i++) $('body').removeClass(String.fromCharCode(63 + n)); 
    $('body').addClass(i); 
    $('body .buttons div').removeClass('active'); 
    $('body .buttons div:nth-child(String.fromCharCode(63 + n))').addClass('active'); 
}

出典

2017-11-01 13:28:59

また、怒鳴るようリアムの答えの上部を最適化することができます。

$("body .buttons div").click(function() { 
    // to get the num dynamically. 
    // It depends on your html. For example, you can add an order attribute to each button, order=1, order=2... 
    var x = $(this).attr(‘order’); 

    runActive(x); 
});

出典

2017-11-01 13:37:28 fightinglion

私はこれらの答えを通して見てきたし、いずれかのボタンをクリックで、それのクラスを取得し、体にそれを追加するとき、私は、単に

と考える可能性が最も簡単な解決策を見つけることができませんでした。クリックされたボタンにアクティブなクラスを追加し、他のクラスからアクティブなクラスを削除します。

シンプルでまっすぐ進む

参照は、私たちに関連するすべてのコードを表示してください

var clickMe = $(".buttons div"), 
 
    body = $("body") 
 

 
clickMe.on("click", function() { 
 
    body.removeClass() 
 
    var butClass = $(this).attr("class") 
 
    body.addClass(butClass) 
 
    $(this).addClass("active") 
 
    $(this).siblings("div").removeClass("active") 
 
})

.buttons div { 
 
    display: inline-block; 
 
    padding: 20px; 
 
    cursor: pointer; 
 
    background: Red; 
 
    margin: 5px; 
 
    border-radius: 100%; 
 
} 
 

 
.buttons div.active { 
 
    background: green; 
 
} 
 

 
body.A { 
 
    background: blue; 
 
} 
 

 
body.B { 
 
    background: yellow; 
 
} 
 

 
body.C { 
 
    background: orange 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <div class="buttons"> 
 
    <div class="A">1</div> 
 
    <div class="B">2</div> 
 
    <div class="C">3</div> 
 
    </div> 
 
</body>

出典

2017-11-01 14:08:40

をクリックしてを削除する複数のボタンに複数のクラスを追加

答えて

関連する問題