Tengo una tabla de 8 imágenes que necesito ordenar alfabéticamente cuando hago clic en cualquiera de las imágenes. La imagen en la que se ha hecho clic va a la primera posición en la primera fila de la tabla. La siguiente posición en la primera fila será la imagen cuyo nombre esté alfabéticamente justo después del nombre de la primera y así sucesivamente para las demás imágenes. Las imágenes se almacenan en una matriz llamada 'flores'.
Esto es lo que tengo hasta ahora:
// Sort Images let imgClick = document.getElementsByTagName('img'); for (var i = 0; i < imgClick.length; i++){ imgClick.addEventListener("click", flowers.sort((a, b) => (a.name > b.name ? 1 : -1))) };Las imágenes no se ordenan cuando hago clic en ellas.
Este fragmento ordenará una lista de imágenes ya existentes en su lugar. Las imágenes deben estar en un contenedor principal común ( div#pics ). Al hacer clic en cualquiera de las imágenes, esta se colocará en la primera posición.
let imgs = [...document.querySelectorAll('#pics img')].sort((a,b)=>a.name.localeCompare(b.name)); div=document.querySelector("div"); div.onclick=ev=>{ if(ev.target.tagName!=="IMG") return; let i=imgs.indexOf(ev.target); imgs.slice(i).concat(imgs.slice(0,i)).forEach(img=>div.appendChild(img)) } img {margin:8px} <div id="pics"> <img src="pic1" name="c" alt="c"><img src="pic1" name="b" alt="b"><img src="pic1" name="a" alt="a"><img src="pic1" name="d" alt="d"> </div>Espero que esto le dé una idea de cómo implementar eso.
const container = document.getElementById("flowers"); const flowers = [ "rose", "peruvian lily", "chrysanthemum", "orchid", "tulip", "carnation", "hyacinth" ].sort(); function PlaceFlowers(flowers) { container.innerHTML = ""; for(let flower of flowers) { container.innerHTML += `<button id="${flower}" onClick='sortFlowers(event)'>${flower}</button>`; } } PlaceFlowers(flowers); function sortFlowers(event) { const el = event.target.id; const indOfEl = flowers.indexOf(el); PlaceFlowers([...flowers.slice(indOfEl), ...flowers.slice(0, indOfEl)]); } <div id="flowers"></div>