Question

我创建了一个jquery脚本，当单击特定按钮时，该脚本会更改css选择器，该脚本可以正常工作，但无法单击默认的选定按钮。

我尝试更改一些变量和其他内容，但没有任何效果。

$(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');
  });
});

在这里的第2行中，您仅将点击侦听器添加到具有该className的4个按钮中，而将不是添加到第一个按钮（您要重新单击的按钮）

我建议更改此内容：

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

对此：

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

示例片段：

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

最终编辑：向div元素添加ID以本地化jQuery调用（防止意外溢出到项目的其他部分）

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

1 个答案: