Jquery ändern Status der Schaltfläche beim Klicken

Question

Ich habe 6 Schaltflächen, gab ich jeder Schaltfläche einen Standardstatus von false, wenn der Benutzer auf eine Schaltfläche klickt, die entsprechende Status auf wahr wechselt. Wenn ich jetzt eine Taste umschalte, werden alle anderen Tastenstatus auf "falsch" gesetzt.

So etwas wie dies funktioniert, aber was für ein guter Weg ist, viele Tasten, um Code für das, will ich mich nicht wiederholen, dass viel:

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

Answer 1

Sie .data() dafür verwenden können. Unten finden Sie Schnipsel ...

$('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

Sie können eine einzelne click Funktion verwenden und die Taste durch ein data-no Attribut identifizieren.

Dieses Beispiel fügt der aktiven Schaltfläche eine blaue Farbe hinzu, während alle anderen grau bleiben. Die Variable activeButton repräsentiert die Nummer der aktiven Schaltfläche.

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

Um Schleife durch jede der Tasten und einen Code für jede durchführen, können Sie den passenden Namen .each() Funktion in Jquery verwenden. Sie können die Dokumentation hier finden - each()

Jedes Mal, wenn eine Schaltfläche geklickt wird, .each() die Funktion für alle Elemente mit class=buttons und stellen Sie die status=false ausführt. Innerhalb der Funktion können Sie den Selektor $(this) verwenden, um das Objekt der aktuellen Iteration auszuwählen. Schließlich wird außerhalb der Schleife die Schaltfläche, die das Ereignis ausgelöst hat, mit status=true angegeben.

$('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>