如何在jQuery中检查任何元素是否有类？

Question

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”类的按钮。

Answer 1

不必通过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>

Answer 2

您必须首先从所有按钮中删除该类，然后将其添加到单击的按钮中，如下所示：

null

$(".Button").click(function (e) { 
    e.preventDefault();
    if (!$(this).hasClass("buttonActive")) {
        $("button").removeClass("buttonActive");
        $(this).addClass("buttonActive");
    }
});

.buttonActive {
    background: #100f10;
    color: white;   
}

html prettyprint-override"><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>