Estoy trabajando en un sitio web que tiene múltiples imágenes. El usuario puede hacer clic en estas imágenes y luego se mostrará un pequeño texto debajo de esta. Mi idea era obtener el ID de las imágenes y luego mostrar el texto que corresponde a este.
Déjame mostrarte mi código
function SOE() { let bSOE = document.getElementById("bSOE"); let Soe = document.getElementById("SOE"); if (getComputedStyle(Soe).display != "none") { Soe.style.display = "none"; } else { var elements = document.getElementsByClassName("secret"); for (var i = 0; i < elements.length; i++) { if (elements[i].id != "SOE") { elements[i].style.display = "none"; } } Soe.style.display = "block"; } } <div class="mn_bo3"> <div class="map" id="bSOE" onclick="SOE()" style="background-image: url('source/Soe.png')"></div> <div class="map" id="bTG" style="background-image: url('source/tg.png')"></div> <div class="map" id="bDER" style="background-image: url('source/Der.png')"></div> <div class="map" id="bZNS" style="background-image: url('source/Zns.png')"></div> <div class="map" id="bGK" style="background-image: url('source/Gk.png')"></div> </div> <!--Tiny hidden text --> <div class="secret" id="SOE" style="display:none;"> <p>Here are the list of the easter eggs of Shadow of Evil map :</p> </div>Así que creé una función, pero solo funciona para una y no usa esta ID. Necesito ayuda o este código estará muy SECO.
¡Muchas gracias por leer eso!
Puede pasar la identificación de cada div en la llamada de función onClick, así:
JS:
function SOE(id){ let bSOE = document.getElementById(id); ... }HTML:
<div class="map" id="bSOE" onclick="SOE('bSOE')" style="background-image: url('source/Soe.png')" ></div>O si está garantizado, que cada objeto tiene una identificación, puede obtener la identificación a través del objeto 'este' (js permanece igual):
<div class="map" id="bSOE" onclick="SOE(this.id)" style="background-image: url('source/Soe.png')" ></div>Después de eso, puede crear un objeto, que guarda la identificación de la imagen con la identificación del texto:
var elements = { "BSOE": "SOE" }Y luego mostrar el texto correspondiente para cada imagen:
function SOE (id) { var elem = document.getElementById(elements[id]); elem.style.display = "block";Verifique este código para ver si resuelve su problema.
function SOE(selector) { $('p').fadeOut(500) $('#'+selector+' > p').fadeIn(500) } .mn_bo3 { height: 100vh; display: flex; justify-content: space-between; } .map { height: 100px; width: 100px; background-repeat: no-repeat; background-size: contain; position: relative; } p { position: absolute; bottom: -2em; left: 0; right: 0; text-align: center; display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="mn_bo3"> <div class="map" id="bSOE" onclick="SOE('bSOE')" style="background-image: url('1.png')"> <p>Text image 1</p> </div> <div class="map" id="bTG" onclick="SOE('bTG')" style="background-image: url('2.png')"> <p>Text image 2</p> </div> <div class="map" id="bDER" onclick="SOE('bDER')" style="background-image: url('3.png')"> <p>Text image 3</p> </div> <div class="map" id="bZNS" onclick="SOE('bZNS')" style="background-image: url('4.png')"> <p>Text image 4</p> </div> <div class="map" id="bGK" onclick="SOE('bGK')" style="background-image: url('1.png')"> <p>Text image 5</p> </div> </div>Puede crear un controlador de click común para todas las imágenes y mostrar texto oculto con una imagen receptiva.
Entonces, en este caso, la estructura de su código será la siguiente
<div class="map" id="bSOE" onclick="onElementClick(this)" style="background-image: url(https://picsum.photos/200)"></div> <div class="secret" id="bSOE_text"> <p>Here are the list of the easter eggs of Shadow of Evil map :</p> </div>Código de trabajo
function onElementClick(event){ //Before showing div hide other's one [...document.querySelectorAll('div.secret')].forEach(el => el.style.display = 'none'); //To show the repective div document.querySelector('div#' + event.id + '_text').style.display = 'block'; } .map { height: 100px; width: 100px; background-size: cover; order: 1px solid; margin: 10px; } .secret { display: none; } <div class="mn_bo3"> <div class="map" id="bSOE" onclick="onElementClick(this)" style="background-image: url(https://picsum.photos/200)" ></div> <div class="secret" id="bSOE_text"> <p>Here are the list of the easter eggs of Shadow of Evil map :</p> </div> <div class="map" id="bTG" style="background-image: url(https://picsum.photos/200 )" onclick="onElementClick(this)"></div> <div class="secret" id="bTG_text"> <p>Here are the list of the easter eggs of Shadow of Evil map :</p> </div> <div class="map" id="bDER" style="background-image: url(https://picsum.photos/200)" onclick="onElementClick(this)"></div> <div class="secret" id="bDER_text"> <p>Here are the list of the easter eggs of Shadow of Evil map :</p> </div> <div class="map" id="bZNS" style="background-image: url(https://picsum.photos/200)" onclick="onElementClick(this)"></div> <div class="secret" id="bZNS_text"> <p>Here are the list of the easter eggs of Shadow of Evil map :</p> </div> <div class="map" id="bGK" style="background-image: url(https://picsum.photos/200)" onclick="onElementClick(this)"></div> <div class="secret" id="bGK_text"> <p>Here are the list of the easter eggs of Shadow of Evil map :</p> </div> </div>