0
250
Vistas¿Cómo puedo obtener el src y el ID de una imagen en una matriz?
Hice una tarjeta como un "componente dinámico"... Mi sitio puede buscar cualquier artista o canción que esté en Spotify. Cada artista que buscas aparece en su propia ficha.
Escribí el componente de la tarjeta, la imagen y el título en JS. Aquí está la forma en que lo hice:
for(let index = 0; index < artistIdResult.items.length; index++) { var artistImage = document.createElement("input"); artistImage.className = "artistImage"; artistImage.type = "image"; artistImage.src = artistIdResult.items[index].images[0].url; artistImage.id = artistIdResult.items[index].id; artistImage.width = 100; artistImage.height = 100; var artistText = document.createElement("h6"); artistText.className = "artistText"; var text = document.createTextNode(artistIdResult.items[index].name); }(El solo representa el número de artistas/canciones).
Cuando vi el HTML en el inspector, aparece el src, ID y más información de la imagen:
<input class="albumImage" type="image" src="https://i.scdn.co/image/ab67616d0000b273b13137d4579acad480ec9651" id="7m1DQbleCSsoBv1awh5qmu" width="80" height="80">¿Cómo puedo obtener en una matriz el src y la ID de cada tarjeta donde presioné? Quiero decir ... pido los datos en el JS, el HTML muestra el src y la ID, pero ¿cómo puedo obtenerlos en una variable y luego en una matriz?
3 Respuestas
Responde la pregunta0
Primero abrimos una nueva matriz. Luego puede usar la función de clic de jQuery para recuperar los valores de los atributos cuando se hace clic en él $(this) . Y empujarlos a la matriz. Puede verificar la matriz haciendo clic en el botón de prueba. 🥳
jsonArray = []; $('.albumImage').click(function() { getSrc = $(this).attr('src'); getId = $(this).attr('id'); jsonArray.push(getSrc); jsonArray.push(getId); }); $('.test').click(function() { alert(jsonArray); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input class="albumImage" type="image" src="https://i.scdn.co/image/ab67616d0000b273b13137d4579acad480ec9651" id="7m1DQbleCSsoBv1awh5qmu" width="80" height="80"> <input class="albumImage" type="image" src="https://i.scdn.co/image/ab67616d0000b273b13137d4579acad480ec9651" id="1" width="80" height="80"> <button class="test">click to see array</button>0
Si entiendo su requisito correctamente, desea acceder a los valores de los atributos de los elementos en una matriz. Si es así, puedes probar esto :
console.log(Array.from(document.getElementsByClassName('albumImage')).map(item => { return { 'src': item.getAttribute('src'), 'id': item.getAttribute('id') } })); <input class="albumImage" type="image" src="https://i.scdn.co/image1" id="1" width="80" height="80"> <input class="albumImage" type="image" src="https://i.scdn.co/image2" id="2" width="40" height="40"> <input class="albumImage" type="image" src="https://i.scdn.co/image3" id="3" width="20" height="20"> Actualización : al actualizar la respuesta según el comentario del autor, se agregó el evento de clic para obtener la id de la imagen en la que se hizo clic y los valores del atributo src .
demostración :
const artistIdResult = { items: [{ images: [{ url: 'https://i.scdn.co/image/ab67616d0000b273b13137d4579acad480ec9651' }], id: '1', name: 'alpha' }, { images: [{ url: 'https://i.scdn.co/image/ab67616d0000b273b13137d4579acad480ec9651' }], id: '2', name: 'beta' }] }; for(let index = 0; index < artistIdResult.items.length; index++) { var artistImage = document.createElement("input"); artistImage.className = "artistImage"; artistImage.type = "image"; artistImage.src = artistIdResult.items[index].images[0].url; artistImage.id = artistIdResult.items[index].id; artistImage.width = 100; artistImage.height = 100; var artistText = document.createElement("h3"); artistText.className = "artistText"; var text = document.createTextNode(artistIdResult.items[index].name); artistText.append(text); document.getElementById('app').append(artistImage) document.getElementById('app').append(artistText) var div = document.getElementById(artistIdResult.items[index].id); div.addEventListener('click', e => { console.log('id', e.target.id); // Id of clicked image console.log('src', e.target.src); // Src of clicked image }); } <div id="app"> </div>0
Eche un vistazo a la función de clic de jQuery .
$( "#target" ).click(function() { alert( "Handler for .click() called." ); }); Esto adjuntará un controlador de clics en el elemento al que se dirige. Dentro de la función de devolución de llamada, puede acceder a los atributos de los elementos usando $(this) .
Desde allí, puede enviar datos a una matriz global o similar.