如何檢查 html 元素是否包含帶有 javascript 的特定文本

Question

我有一個 html p 標簽，如下所示

 <p class="card-about-bambo-number card-aboot-mahagany-number">0 <spam>left</spam></p>

我還有一個按鈕，我想在 p 標簽為 0 英寸時將其禁用。

我已經嘗試在 JavaScript 和 jquery 中執行此操作。

我試過使用包含，但這沒有用，我也試過使用包含。

這是我厭倦的代碼

 $(document).ready(() => { if ($(".card-about-mahagany-number:contains('0')")) { $('.btn-about-mahagany').attr('disabled', 'disabled'); $('.card-about-mahagany-body').addClass('card-zero'); } }); const numberText = document.getElementsByClassName('card-aboot-mahagany-number'); const buttonOut = document.getElementsByClassName('btn-about-mahagany'); //buttonOut.disabled = true; if (numberText.textContent.includes('0')) { buttonOut.disabled = true; }

 <p class="card-about-bambo-number card-aboot-mahagany-number">0 <spam>left</spam></p> <button class="btn btn-select btn-about-mahagany btn-primary" disabled="false">Out of Stock</button>

Answer 1

document.getElementsByClassName 返回一個類似數組 object 的元素，其中元素為 class。

嘗試這個：

for (let i = 0; i < numberText.length; i++) {
  if (numberText[i].textContent.includes("0")) {
    for (let i = 0; i < buttonOut.length; i++) {
      buttonOut[i].disabled = true;
    }
  }
}

Answer 2

首先，讓我們從<spam>更改為<span> 。

其次，我們嘗試為一張卡創建一個簡單的代碼。 在這種情況下，如果將值從 0 更改為 1，您將看到該按鈕。 如果將值從 1 更改為 0，則運行時按鈕將不會顯示。

 $(document).ready(() => { console.log('document ready'); let card = $('p.card-about-bambo-number'); console.log(card.text()); let value = +card.text().replace(/\D+/g, ""); console.log('value: ', value); console.log('value type: ', typeof(value)); $('#btn').toggle(value > 0); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p class="card-about-bambo-number card-aboot-mahagany-number">0 <span>left</span></p> <button id="btn">Button</button>

第三，讓我們修改它以使用多個卡片：

 $(document).ready(() => { let cards = $('p.card-about-bambo-number'); cards.each(function() { let card = $(this); let value = +card.text().replace(/\D+/g, ""); card.next('#btn').toggle(value > 0); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p class="card-about-bambo-number card-aboot-mahagany-number">0 <span>left</span></p> <button id="btn">Button</button> <hr/> <p class="card-about-bambo-number card-aboot-mahagany-number">1 <span>left</span></p> <button id="btn">Button</button>

使用 class card-about-bambo-number ，我們將遍歷所有具有該 class 的元素。

對於每張卡片，我們將使用方法text來提取文本，然后我們使用正則表達式刪除任何不是數字的內容，接下來我們使用前面的+將數字從字符串轉換為數字（“javascript hack "), 然后我們得到了數字。

最后，我們表示希望包含此類 class 的元素的下一個兄弟元素根據值是否大於零來切換（顯示/隱藏）。

我希望這會有所幫助。

Answer 3

textcontent 應該是 innerHTML