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