クリック時のボタンのJqueryステータスの変更

Question

6つのボタンがありますが、ステータスがtrueに切り替わるボタンをユーザーがクリックすると、それぞれのボタンにデフォルトのステータスfalseが与えられました。今度はボタンを切り替えると他のボタンのステータスはすべてfalseに切り替わります。このような

何かが働いていたが、これは多くのボタンのコードには良い方法は何か、私はずっと自分自身を繰り返したくはありません：

toolOneStatus = false 
    $('#btn-tool-one').click(function() { 
     toolOneStatus = true; 
     toolTwoStatus = false; .... 
    } 

Answer 1

あなたはこのため.data()を使用することができます。以下のスニペットを確認してくださいあなたは、単一のclick機能を使用してdata-no属性でボタンを識別することができます...

$('button').click(function(){ 
 
    alert('status ' + $(this).data('status')); 
 
    if($(this).data('status')=="false"){ 
 
     //do this 
 
    } else { 
 
     //do this 
 
    } 
 
    $(this).data('status','true') 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" data-status="false">Button1</button> 
 
<button type="button" data-status="false">Button2</button> 
 
<button type="button" data-status="false">Button3</button> 
 
<button type="button" data-status="false">Button4</button> 
 
<button type="button" data-status="false">Button5</button> 
 
<button type="button" data-status="false">Button6</button>

Answer 2

。

このサンプルでは、​​アクティブなボタンに青色が追加され、その他のボタンはグレーのまま残ります。 activeButton変数は、アクティブなボタンの番号を表します。ボタンのそれぞれをループし

var activeButton = 0; 
 
$('.mybtns').click(function() { 
 
    activeButton = $(this).data('no'); 
 
    console.log('active='+activeButton); 
 
    $('.mybtns').css('background-color','rgb(221, 221, 221)'); 
 
    $(this).css('background-color','lightblue'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="mybtns" data-no="1">Test1</button> 
 
<button class="mybtns" data-no="2">Test2</button> 
 
<button class="mybtns" data-no="3">Test3</button> 
 
<button class="mybtns" data-no="4">Test4</button> 
 
<button class="mybtns" data-no="5">Test5</button> 
 
<button class="mybtns" data-no="6">Test6</button> 
 
<button class="mybtns" data-no="7">Test7</button>

Answer 3

し、それぞれにいくつかのコードを実行し、あなたはjqueryので利用できる適切な名前.each()機能を使用することができます。あなたはここでそれのためのドキュメントを見つけることができます - each()

ボタンがクリックされるたびに、.each()はclass=buttonsとstatus=falseを設定すると、すべての要素に対して関数を実行します。関数内では、$(this)セレクタを使用して、現在の反復のオブジェクトを選択することができます。最後に、ループの外側で、イベントを発生させたボタンにstatus=trueが与えられます。

$('button').click(function() { 
 
    $(".buttons").each(function(index) { 
 
    // Looping through each element having class "buttons" 
 
    $(this).data("status", "false"); //Setting every button to false. 
 
    $(this).next().html($(this).data("status")); 
 
    }); 
 
    $(this).data("status", "true"); // Outside the loop, setting status true for the button which triggered the click event. 
 
    $(this).next().html($(this).data("status")); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" class="buttons" id="button1" data-status="false">Button1</button><span id="p1"></span> 
 
<button type="button" class="buttons" id="button2" data-status="false">Button2</button><span id="p2"></span> 
 
<button type="button" class="buttons" id="button3" data-status="false">Button3</button><span id="p3"></span> 
 
<button type="button" class="buttons" id="button4" data-status="false">Button4</button><span id="p4"></span>