null
$(".Button").click(function (e) {
e.preventDefault();
if (!$(this).hasClass("buttonActive")) {
$(this).addClass("buttonActive");
} else {
$(this).removeClass("buttonActive");
}
});.buttonActive {
background: #100f10;
color: white;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="numberSelect">
<button type="button" value="1" class="Button">1</button>
<button type="button" value="2" class="Button">2</button>
<button type="button" value="3" class="Button">3</button>
<button type="button" value="4" class="Button">4</button>
<input type="hidden" name="number" id="number">
</div>null
我想做的是，当我点击任何按钮时，它检查是否有任何其他按钮具有类“ButtonActive”，如果任何其他按钮具有这个类，它就从另一个按钮中移除这个类，并将它添加到我点击的按钮中。因此它应该始终是一个具有“ButtonActive”类的按钮。
您必须首先从所有按钮中删除该类，然后将其添加到单击的按钮中，如下所示：
null
$(".Button").click(function (e) {
e.preventDefault();
if (!$(this).hasClass("buttonActive")) {
$("button").removeClass("buttonActive");
$(this).addClass("buttonActive");
}
});.buttonActive {
background: #100f10;
color: white;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="numberSelect">
<button type="button" value="1" class="Button">1</button>
<button type="button" value="2" class="Button">2</button>
<button type="button" value="3" class="Button">3</button>
<button type="button" value="4" class="Button">4</button>
<input type="hidden" name="number" id="number">
</div>
不必通过if{...}条件检查类的存在性。这可以在jquery选择器本身中完成。移除类只会影响包含该类的那些选择器，而不会影响当前（this）选择器：
...(".Button.buttonActive").not(this).removeClass("buttonActive");
你的问题有几种不同的解决方案。但我想提供一个解决方案在一行，无条件，如果。
null
$(".Button").click(function (e) {
e.preventDefault();
$(this).addClass("buttonActive").closest("#numberSelect").find(".Button.buttonActive").not(this).removeClass("buttonActive");
});.buttonActive {
background: #100f10;
color: white;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="numberSelect">
<button type="button" value="1" class="Button">1</button>
<button type="button" value="2" class="Button">2</button>
<button type="button" value="3" class="Button">3</button>
<button type="button" value="4" class="Button">4</button>
<input type="hidden" name="number" id="number" />
</div>