使用 JavaScript 在另一個 div 中隱藏基於文本的特定 div

Question

我正在嘗試使用 javascript 執行邏輯，因此如果 class 的 div 是 b 格式，如果 innerhtml 值為 Audio，它將隱藏購物車按鈕 div，否則它將隱藏更多按鈕 div。 由於某種原因，它不起作用。

var itemButtons = document.querySelectorAll('.slider-wrapper');

for(var i=0; i<itemButtons.length; i++){

   var b_format_element = itemButtons[i].getElementsByClassName("b-format")[0];
   var cart_element = itemButtons[i].getElementsByClassName("cart-button")[0];
   var more_element = itemButtons[i].getElementsByClassName("more-button")[0];
   
   if(b_format_element.innerHTML == "Audio"){
     cart_element.style.display = "none";
   } else {
     more_element.style.display = "none";
   }
}

這是 html 代碼

<div class="slider-wrapper">
       ${#Recommend} // this repeat record
       <a class="product" href="#">
           <div>
               <p class="b-format">Audio</p>
           </div>

           <!-- buttom -->
             
               <div class="product-items cart-button">
                 <span>Les mer</span>
               </div>
                                                                               
               <div class="product actions product-items more-button">
                 <span>Les mer</span>
               </div>
                                                                           
          <!-- button end -->
       </a>
       ${/Recommend}
</div>

Answer 1

在循環中一遍又一遍地使用相同的 ID 標簽不是一個好主意。 而是使用 class 名稱。 此外，使用querySelector將為您提供第一個匹配元素。 看起來您還想循環通過滑塊容器的內部 DIV，而不是循環通過多個 slider 容器。 我添加了一個內部容器.record 。

 document.querySelectorAll('.slider-wrapper.record').forEach(c => { let isAudio = c.querySelector('.b-format')?.innerText.trim() === 'Audio'; c.querySelector('.cart-button').style.display = isAudio? 'none': 'block'; c.querySelector('.more-button').style.display =?isAudio: 'none'; 'block'; })

 .cart-button { color: #f00; }.more-button { color: #999; }

 <div class="slider-wrapper"> <div class='record'> <div> <p class="b-format">Audio</p> </div> <!-- buttom --> <div class="cart-button"> <span>Les mer</span> </div> <div class="more-button"> <span>Les mer</span> </div> <!-- button end --> </div> <div class='record'> <div> <p class="b-format">Not Audio</p> </div> <!-- buttom --> <div class="cart-button"> <span>Les mer</span> </div> <div class="more-button"> <span>Les mer</span> </div> <!-- button end --> </div> </div>