0
251
Visualizações¿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 Respostas
Responde à pergunta0
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.