Pasar como parametros el id y class
Publicado por Francisco Daniel (43 intervenciones) el 11/02/2021 17:05:59
Hola a todos. Como siempre gracias por responder siempre y ayudarme con JS. Tengo el siguiente problema. Como puedo pasar por parametros el id y class de unos elementos a JS. Por ejemplo, tengo elsiguiente codigo html:
con este codigo JS:
Este código me permite hacer un combo box con imágenes. El problema es que necesito varios de estos combos en mi pagina, pero al agregarlos no tienen la misma funcionalidad que el primero que agregué ya que el JS toma los id de los elemntos para poder hacer la funcionalidad de un combo. Si yo a cada combo insertado le cambio los id y las class y luego agrego el codigo JS tambien haciendo referencia a los id y class cambiados me funciona.
Pero necesito colocar en la pagina cerca de 24 combos para que selecciones distintas opciones y no creo que esté bien generar tanto código repetido.
Se podrá hacer lo que quiero? Como?
Muchas Gracias
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<div class="contenedor">
<form action="">
<div class="selectbox">
<div class="select" id="select">
<div class="contenido-select">
<h1 class="titulo"></h1>
</div>
<!-- <i class="fas fa-angle-down"></i> --></div>
<div class="opciones" id="opciones">
<?php
$res = $con->query("select * from referencia_trabajo");
while($f = mysqli_fetch_array($res)){ ?>
<a href="#" class="opcion">
<div class="contenido-opcion">
<img src="<?php echo $f['img']; ?>" alt="">
<!-- <div class="textos"> <h1 class="titulo"><?php echo $f['nombre']; ?></h1> </div> --></div>
</a>
<?php } ?>
</div>
</div>
<input type="hidden" name="pais" id="inputSelect" value="">
</form>
</div>
con este codigo JS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const select = document.querySelector('#select');
const opciones = document.querySelector('#opciones');
const contenidoSelect = document.querySelector('#select .contenido-select');
const hiddenInput = document.querySelector('#inputSelect');
document.querySelectorAll('#opciones > .opcion').forEach((opcion) => {
opcion.addEventListener('click', (e) => {
e.preventDefault();
contenidoSelect.innerHTML = e.currentTarget.innerHTML;
select.classList.toggle('active');
opciones.classList.toggle('active');
hiddenInput.value = e.currentTarget.querySelector('.titulo').innerText;
});
});
select.addEventListener('click', () => {
select.classList.toggle('active');
opciones.classList.toggle('active');
});
Este código me permite hacer un combo box con imágenes. El problema es que necesito varios de estos combos en mi pagina, pero al agregarlos no tienen la misma funcionalidad que el primero que agregué ya que el JS toma los id de los elemntos para poder hacer la funcionalidad de un combo. Si yo a cada combo insertado le cambio los id y las class y luego agrego el codigo JS tambien haciendo referencia a los id y class cambiados me funciona.
Pero necesito colocar en la pagina cerca de 24 combos para que selecciones distintas opciones y no creo que esté bien generar tanto código repetido.
Se podrá hacer lo que quiero? Como?
Muchas Gracias
Valora esta pregunta
0