Tengo una página de publicación de blog de Wordpress personalizada que muestra tarjetas de perfil de personal, 12 personas a la vez. A veces, las personas tienen un identificador de Twitter, otras no. Cuando el valor ingresado en el backend para su identificador es "ninguno", tanto el título como el campo de Twitter deben estar ocultos, para TODAS las personas en la misma pantalla (nuevamente, paginando a través de 12 personas a la vez). De lo contrario, debería mostrar ambos.
<p>Sample text</p> <div class="twitter-handle-title"> <p>Twitter Handle:</p> </div> <div class="twitter-handle-text"> <p>@twitter</p> </div> <p>Sample text.</p> <div class="twitter-handle-title"> <p>Twitter Handle:</p> </div> <div class="twitter-handle-text"> <p>None</p> </div>Este es el javascript que estaba tratando de usar, pero no funciona:
let txt = document.getElementsByClassName("twitter-handle-text").innerText; if (txt == "None") { document.getElementsByClassName('twitter-handle-title').style.display = "none"; document.getElementsByClassName('twitter-handle-text').style.display = "none"; }Cualquier orientación sería apreciada!
Como se mencionó, getElementsByClassName devuelve una HTMLCollection de todos los elementos de destino.
Para aplicar su lógica prevista a cada tarjeta de perfil, deberá iterar sobre cada una y ejecutar sus comprobaciones y actualizaciones de estilo en cada iteración.
Para facilitar esto, sugiero agregar un contenedor a cada elemento de la tarjeta para encapsular su lógica. Algo como esto:
<div class="profile-card"> <p>Sample text.</p> <div class="twitter-handle-title"> <p>Twitter Handle:</p> </div> <div class="twitter-handle-text"> <p>None</p> </div> </div> Ahora puede seleccionar todos los envoltorios de tarjetas mediante una interfaz de documento como getElementsByClassName o querySelectorAll .
const cards = document.querySelectorAll('.profile-card'); Una vez que tengamos una colección de todos los elementos de la profile-card , podemos recorrer cada elemento envolvente usando el método de matriz forEach . Ahora que estamos encapsulados dentro de cada tarjeta, podemos aplicar su lógica.
Para los selectores internos, recomendaría usar querySelector ya que solo necesitamos seleccionar un solo elemento por nombre de clase en lugar de una colección.
cards.forEach((card) => { if (card.querySelector('.twitter-handle-text').innerText === 'None') { card.querySelector('.twitter-handle-title').style.display = 'none'; card.querySelector('.twitter-handle-text').style.display = 'none'; } })¡Espero que esto ayude!