Estoy tratando de hacer lógica usando javascript, de modo que si div donde la clase tiene formato b si el valor de HTML interno es Audio, ocultará el div del botón del carro, de lo contrario ocultará el div del botón más. Por alguna razón no funciona.
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"; } }este es el código html
<div class="slider-wrapper"> ${#Recommend} // this repeat record <a class="product" href="#"> <div> <p class="b-format">Audio</p> </div> <div class="product-items cart-button"> <span>Read more</span> </div> <div class="product actions product-items more-button"> <span>Read more</span> </div> </a> ${/Recommend} </div>No es una buena idea usar las mismas etiquetas de identificación una y otra vez en un bucle. En su lugar, utilice un nombre de clase. Además, al usar querySelector obtendrá el primer elemento coincidente. También parece que desea recorrer los DIV internos del contenedor deslizante, en lugar de recorrer múltiples contenedores deslizantes. Agregué un contenedor interno .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>