當跨度內的數字大于0時添加類-有解無憂

只有當“fav-con-count”跨度內的數字大于0時，我才想將“活動”類添加到“fav-contractors”容器中。

這是 HTML 代碼

<span class="fav-contractors">
    <span class="fav-con-count">7</span>
</span>

這是jQuery代碼

function favCounter() {
    if ($(".fav-con-count").textContent > 0) {
        $(".fav-contractors").addClass("active");
    } 
};

favCounter();

我應該使用哪個“如果”規則？我也嘗試過類似的方法，但沒有奏效：

function favCounter() {
    var favValue = $(".fav-con-count").textContent;

    if ( favValue > 0)) {
        $(".fav-contractors").addClass("active");
    } 
};

favCounter();

uj5u.com熱心網友回復：

Node.textContent 是 JavaScript，不是 jQuery 庫本身的一部分。jQuery 使用幕后使用的.text()方法來獲取文本textContent。此外，閱讀 jQuery 的toggleClass() 方法，您可以使用第二個布爾引數，從而使if陳述句變得不必要。

由于您使用類，因此這樣做非常危險$(".fav-contractors").addClass("active");，因為您可以：

.fav-contractors一個頁面中有許多元素，所有元素都將獲得活動類
$(".fav-con-count").text() > 0意味著僅當該類Element 的第一個具有大于 0 的文本時-這也可能不正確并導致錯誤的不良行為。

解決方案

用于.each()迭代特定類的所有元素
用于.closest()遍歷特定元素的祖先（或自身）
（如前所述）使用toggleClass()

$(".fav-con-count").each(function() {
  $(this).closest(".fav-contractors").toggleClass("active", $(this).text() > 0);
});

.fav-contractors { padding: 1rem; }
.active { background: gold; }

<span class="fav-contractors">
  <span class="fav-con-count">7</span>
</span>

<span class="fav-contractors">
  <span class="fav-con-count">0</span>
</span>

<span class="fav-contractors">
  <span class="fav-con-count">3</span>
</span>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

uj5u.com熱心網友回復：

你應該使用.text()而不是textContent

function favCounter() {
    if ($(".fav-con-count").text() > 0) {
        $(".fav-contractors").addClass("active");
    } 
};

favCounter();

.active {
  background: yellow;
}

<span class="fav-contractors">
    <span class="fav-con-count">7</span>
</span>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>

這是數字 0 不添加活動類的示例

function favCounter() {
    if ($(".fav-con-count").text() > 0) {
        $(".fav-contractors").addClass("active");
    } 
};

favCounter();

.active {
  background: yellow;
}

<span class="fav-contractors">
    <span class="fav-con-count">0</span>
</span>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/518646.html

標籤：javascriptjQuery

上一篇：如果在下拉串列1中選擇了值，如何更改下拉串列2中的選項

下一篇：JavaScript：使用for回圈將文本從陣列附加到h1