quiero ocultar el botón mostrar más si la altura del div (ccontainer) es inferior a 550 px y tendré más de un div y para cada uno tendré un botón mostrar más, y ya tengo un código que funciona (oculta el btn ) pero no funciona para más de un botón, como si hubiera dos divs, ocultará el botón del primer div pero simplemente ignora el segundo, tal vez porque el código se implementa de arriba a abajo, para resumir lo que quiero hacer es que si la altura de div es inferior a 550 px, el botón Mostrar más debe estar oculto y el código también debe ocultar el segundo botón para el segundo div.
y lo siento por mi inglés roto
código
js
// showmore btn show/hide const btn = document.querySelector('.showmore'); const height = document.querySelector('#ccontainer').clientHeight; btn.forEach(function(){ if (height <= 530) {btn.style.display = 'none';} else {btn.style.display = '';} )}html
<div class="ccontainer" id="ccontainer"> <p id="context"> content </p> <div class="img" id="cntimgcon" > <img src="images\image2.jpg" id="cntimgp1"> </div> <p id="context"> content </p> </div> <Button class="showmore"> show more </button>Su pregunta no es completamente comprensible. Pero creo que está pidiendo que oculte el botón Mostrar más superior y muestre otro botón Mostrar más cuando el contenedor superior tiene menos de 500 px. Su estilo del botón no me parece bueno, pero no lo cambié ya que esta es una pregunta de jquery. Para probar este código, duplico el mismo código html que ha proporcionado. Y agregué la URL de la imagen para mostrar la imagen ya que no proporcionó el recurso de la imagen. Y agregué la función window.onload para ejecutar su función específica después de que se carga la página. Sanbox funcionando .
Necesito mencionar que usó const btn= document.querySelector('.showmore') Pero debería cambiarse a const btn =document.querySelectorAll(".showmore"); . querySelector solo selecciona el primer elemento, pero querySelectorAll le devuelve una lista de nodos.
código HTML
<div class="ccontainer" id="ccontainer"> <p id="context">content</p> <div class="img" id="cntimgcon"> <img src="https://crdms.images.consumerreports.org/c_lfill,w_470,q_auto,f_auto/prod/cars/chrome/white/2018TOC310001_1280_01" id="cntimgp1" height="25px" width="auto" /> </div> <p id="context">content</p> </div> <button class="showmore">show more</button> <div class="ccontainer" id="ccontainer"> <p id="context">content</p> <div class="img" id="cntimgcon"> <img src="https://crdms.images.consumerreports.org/c_lfill,w_470,q_auto,f_auto/prod/cars/chrome/white/2018TOC310001_1280_01" id="cntimgp1" height="25px" width="auto" /> </div> <p id="context">content</p> </div> <button class="showmore">show more</button>codigo js
<script> window.onload = function () { const btn = document.querySelectorAll(".showmore"); const height = document.querySelector("#ccontainer").offsetHeight; btn.forEach(function (single, index) { if (height <= 500 && index == 0) { single.style.display = "none"; } else { single.style.display = "block"; } }); }; </script>