单击然后取消单击jQuery按钮不起作用

Question

我正在尝试制作一个按钮，单击一下即可更改其颜色，然后单击后恢复为原始形式。 类似于单击和未单击之类的内容。

我添加了一个 JSfiddle 供您查看。 https://jsfiddle.net/dw5y5xLx/3/

$('.genM').click(function() {
$('.genM').removeClass('selected');

$(this).addClass('selected');
});

谢谢！

另外，有没有办法只使用 CSS HTML 来做到这一点？

谢谢。

Answer 1

$('.genM').click(function() {
$(this).toggleClass('selected');
});

我已经为您更新了js小提琴，请检查(https://jsfiddle.net/dw5y5xLx/15/(！

Answer 2

jQueryhasClass函数可能会有所帮助

$('.genM').click(function() {
if($(this).hasClass('selected')){
$(this).removeClass('selected');
}else{
$(this).addClass('selected');
}
});

Answer 3

IDEA：

有没有办法只使用CSS HTML来做到这一点？

是的，有一种方法可以通过纯CSS和HTML来实现这一点。但是，如果你不想使用 js，你必须有一个 HTML 元素，它能够单独保持"按下"或"未按下"状态，没有 js。

但是，没有这样的HTML元素，因此您必须使用类似的东西：复选框

<input type="checkbox">有"已检查"和"未选中"状态，实际上与"按下"或"未按下"相同。

---

溶液：

诀窍是用CSS对ckeckbox进行风格化，使其在视觉上显示为按下或未按下的按钮。下面是一个如何对复选框进行风格化的示例 - 您需要修改 CSS 才能使其看起来像一个按钮，而不是一个切换开关！

您需要使用这样的 CSS 选择器(如示例所示(：

input[type="checkbox"]:checked { ... },
input[type="checkbox"]:checked + .slider { ... },