我有一個包含 8 個影像的表格，當我單擊任何影像時，我需要按字母順序對這些影像進行排序。已單擊的影像將轉到表格第一行中的第一個位置。第一行中的下一個位置將是名稱按字母順序緊跟在第一個影像名稱之后的影像，其他影像依此類推。影像存盤在一個名為“花”的陣列中。
這是我到目前為止所擁有的：
// 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)))
};
當我單擊它們時，影像不會被排序。
uj5u.com熱心網友回復：
我希望這能讓您了解如何實作它。
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>uj5u.com熱心網友回復：
此代碼段將對現有影像的串列進行排序。影像需要位于公共父容器 ( div#pics) 中。通過單擊任何影像，該影像將被放置在第一個位置。
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/318164.html
標籤：javascript 数组 排序 dom
上一篇：如何在單擊時將HTML中按鈕的文本顏色更改為隨機顏色？
下一篇：如何通過url從站點獲取所有圖示