Hola estoy practicando con los bucles y tengo un problemas sobre unas imagenes que quiero que me salga a la hora de darle click a los modal, se trata de que las imagenes que quiero poner en cada contenedor salga la misma foto en el fondo de modal usando data-* este es el codigo
<div class="item" data-imagen="/img/IMG_0008.JPG">
<div class="titulo">
<button type="button" id="btnModal">modal </button>
</div>
<div id="tvesModal" class="modalContainer imgfondo">
<div class="modal-content">
<span class="close">x</span>
<h2>modal</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum voluptatem qui, nostrum dolorem maiores est? Odio ipsa numquam totam earum laudantium obcaecati? Explicabo, quis blanditiis?
</p>
</div>
</div>
</div>
<div class="item" data-imagen="/img/IMG_0006.JPG">
<div class="titulo">
<button type="button" id="btnModal">modal </button>
</div>
<div id="tvesModal" class="modalContainer imgfondo">
<div class="modal-content">
<span class="close">x</span>
<h2>modal</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum voluptatem qui, nostrum dolorem maiores est? Odio ipsa numquam totam earum laudantium obcaecati? Explicabo, quis blanditiis?
</p>
</div>
</div>
</div>
for (i = 0; i < item.length; i++) {
var dataImg = item[i].dataset;
var laimagen = [dataImg.imagen];
item[i].style.backgroundImage = `url(${laimagen})`;
console.log('entro en el bucle ' + i);
var fondoimg = document.querySelector('.imgfondo');
fondoimg.style.backgroundImage = `url(${laimagen})`;
console.log(fondoimg);
}
en la que los data-imagen es la dirección de las imagenes que esta para generar el bucle for y aumentar las veces necesaria que necesites. Desde hay funciona corectamente el problema que tengo es que cuando le doy click a los modal esa misma imagen quiero que salga en el fondo del contenedor no me sale y solo sale el primero...
sengun en la consola del navegador me sale la imagenes pero a la hora de darle click a los modal me sale solo el primer imagenes .
.imgfondo
está dos veces, es por eso que aplica la imagen dos veces. Y ojo que tienes duplicado un idtvesModal
y puede que te genere algun error a posterior.document.querySelector('.imgfondo')
pero delitem[i]
que correspone a cada vuelta delfor
.var fondoimg = document.querySelector('.imgfondo');
. Estás capturando todas las.imgfondo
, cuando deberias de hacervar fondoimg = item[i].querySelector('.imgfondo');
, pruebalo y me dices!