我需要解決以下步驟：將影像存盤在陣列中以備后用。我真的遇到了我不知道從哪里開始的困難。
我使用 picsum 創建了一個小畫廊；當用戶點擊圖片時；影像需要存盤在一個新的 [影像] 陣列中。
https://codepen.io/aaron_1986/pen/oNyborW?editors=1010
<img src="" id="ggg">
<img src="" id="ggg">
<img src="" id="ggg">
<img src="" id="ggg">
<img src="" id="ggg">
<div id="text">
</div>
JS
for(let i = 0; i < 5; i ) {
const img = document.getElementById("ggg");
img.src = "https://picsum.photos/200/301?id=" i;
document.body.appendChild(img);
img.addEventListener("click", function() {
console.log(i);
document.getElementById("text").innerHTML = "YOU CLICKED ME!";
})
}
uj5u.com熱心網友回復：
創建一個陣列。用于 forEach()回圈 IMG 元素。更新img.src。單擊影像時用于addEventListener()添加img.src到陣列。給用戶反饋。
let selected_images = [];
document.querySelectorAll('.ggg').forEach(function (img, idx) {
img.src = "https://picsum.photos/200/301?id=" idx;
img.addEventListener("click", function({target: src}) {
// check for existing img in array
!selected_images.includes(src) // don't terminate (;) this expression
// append to array if not found
&& selected_images.push(src);
document.getElementById("text").innerHTML = `YOU CLICKED ${idx 1}`;
console.log(selected_images);
});
});<div id="text"> </div>
<img src="" class="ggg" />
<img src="" class="ggg" />
<img src="" class="ggg" />
<img src="" class="ggg" />
<img src="" class="ggg" />轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/524739.html
標籤：javascript数组
上一篇：將URL卷曲到vb.net