javascript - 单击不同的按钮不允许我返回原来的按钮

标签 javascript jquery html css

我创建了一个 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>

最佳答案

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

在这里的第 2 行中,您只将点击监听器添加到具有该类名的 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>

最终编辑:将 ID 添加到 div 元素以本地化 jQuery 调用(防止意外溢出到元素的其他部分)

关于javascript - 单击不同的按钮不允许我返回原来的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56938941/

相关文章:

php - 如何让 mysql 数据库 id 随机回显?

javascript - Node.js - crypto.js - PFX header 太长

jquery - 使用网格系统构建 jQuery Mobile 照片库

javascript - 尝试使用 componentWillReceiveProps 更改按钮颜色

HTML5 : Fill circle/arc by percentage

java - 通过 CSS 选择器抓取

javascript - 如何使用特定数组索引更改状态数组的对象值

javascript - 了解不同的事件监听器方法

javascript - React JS,加载json数据然后操作它

jquery - 如何制作图像幻灯片循环的 Controller ?