2

Quiero saber si es posible utilizar el Id de un elemento en caso de ser usado

Por ejemplo tenemos

<img id="image1" onclick="usarImagen();" class="img-responsive center-block" src="images\imagen1.jpg" alt="banner1" align="middle"/>
<img id="image2" onclick="usarImagen();" class="img-responsive center-block" src="images\imagen2.jpg" alt="banner2" align="middle"/>
<img id="image3" onclick="usarImagen();" class="img-responsive center-block" src="images\imagen3.jpg" alt="banner3" align="middle"/>

y que puedan ser llamados de esta manera:

...

function usarImagen() {
        var image = document.getElementById("image*").value;
...

en vez de especificar de uno en uno y que se tome únicamente el que sea utilizado

2 respuestas 2

3

Utiliza el método document.querySelectorAll() para obtener un arreglo con todos los elementos que coincidan con el selector especificado:

var imagenes = document.querySelectorAll("[id*='image' i]");
console.log(imagenes.length); // 3 images 

El selector es [id*='image'] donde id*= busca una concidencia parcial de la cadena image, puede ser al principio, en medio o al final.

1
0

La forma más sencilla de hacerlo es utilizando jQuery:

$(function(){
  var images = $('img[id^="image"]');
  var resultado = '';
  images.each(function(i) { resultado += 'Imagen ' + images[i].id + '\n'; });
  $('#resultado').text(resultado);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image1" onclick="usarImagen();" class="img-responsive center-block" src="images\imagen1.jpg" alt="banner1" align="middle"/>
<img id="image2" onclick="usarImagen();" class="img-responsive center-block" src="images\imagen2.jpg" alt="banner2" align="middle"/>
<img id="image3" onclick="usarImagen();" class="img-responsive center-block" src="images\imagen3.jpg" alt="banner3" align="middle"/>

<p>&nbsp;</p>

<pre id="resultado"></pre>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.