单击其他按钮不允许我单击原始按钮

Question

I created a jquery script which changes the css selector when I click on a specific button, well the script does work but I can't click back on the default selected button.

I've tried changing a few variables and other things but nothing works.

 $(document).ready(function() { $(".btn-secondary").click(function() { $(".btn-primary").addClass('btn-secondary').removeClass('btn-primary'); $(this).addClass('btn-primary').removeClass('btn-secondary'); }); }); 

 .btn-primary { background-color: blue } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col text-center"> <button class="btn mb-1 btn-primary" name="type" value="username">Username</button> <button class="btn mb-1 btn-secondary" name="type" value="email">Email</button> <button class="btn mb-1 btn-secondary" name="type" value="password">Password</button> <button class="btn mb-1 btn-secondary" name="type" value="hash">Hash</button> <button class="btn mb-1 btn-secondary" name="type" value="ip">IP Address</button> </div> 

Answer 1

$(document).ready(function() {
  $(".btn-secondary").click(function() {
    $(".btn-primary").addClass('btn-secondary').removeClass('btn-primary');
    $(this).addClass('btn-primary').removeClass('btn-secondary');
  });
});

In line 2 here, you are only adding the click listener to the 4 buttons with that className and not the first button (the one you want to reclick)

I would suggest changing this:

$(".btn-secondary").click(function() {

To this:

$(".btn").click(function() {

Example Snippet:

 $(document).ready(function() { $("#buttons .btn").click(function() { $(".btn-primary").addClass('btn-secondary').removeClass('btn-primary'); $(this).addClass('btn-primary').removeClass('btn-secondary'); }); }); 

 .btn-primary { background-color: blue } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="buttons" class="col text-center"> <button class="btn mb-1 btn-primary" name="type" value="username">Username</button> <button class="btn mb-1 btn-secondary" name="type" value="email">Email</button> <button class="btn mb-1 btn-secondary" name="type" value="password">Password</button> <button class="btn mb-1 btn-secondary" name="type" value="hash">Hash</button> <button class="btn mb-1 btn-secondary" name="type" value="ip">IP Address</button> </div> 

Final edit: added ID to div element to localize jQuery call (prevent unintended spillover to other parts of the project)