javascript - 如何在javascript中从一个类数组推送到另一个数组？

Question

我有一组带有 class="btn"的图像。单击时，监听器将 btn.src 替换为图像 arr 中的随机图像。

然后，我需要将 randomly-selected-item.src 存储在一个数组中以供进一步操作。我能够将图像随机插入 btn 类，但不知道如何每次 抓取随机选择的项目并将它们推送到数组中以进行进一步操作。

简而言之，我正在尝试检查两个选定项目是否具有相同的 src。

var x = document.getElementsByClassName('btn');
for (var i = 0; i < x.length; i++) {
  x[i].addEventListener('click', feedImages);
}


function feedImages(e) {
    var images = ["image/1.png",
                  "image/2.png",
                  "image/3.png",
                  "image/4.png",
                  "image/5.png",
                  "image/6.png"];

    var img = document.createElement("img");
    img.src = images[Math.floor(Math.random()*images.length)];
  document.getElementsByClassName("result").appendChild(img);

};

//如何每次获取 this.img.src 并将它们推送到一个新数组中，这样我就会有类似的东西

var newArr["selectedImage.png", ....];

用户点击任何项目后

HTML 看起来很简单。触发后 SRC 随机更改为新图像。

<img class="btn" src="btn.png">
<img class="btn" src="btn.png">
<img class="btn" src="btn.png">
<img class="btn" src="btn.png">
<img class="btn" src="btn.png">

Answer 1

您可以通过使用随机数作为 images 数组的索引并使用它插入 newArr 以及 img.src 来轻松获得。

var x = document.getElementsByClassName('btn');
 for (var i = 0; i < x.length; i++) {
   x[i].addEventListener('click', feedImages);
 }

var newArr = [];
 function feedImages(e) {
    var images = ["image/1.png",
                  "image/2.png",
                  "image/3.png",
                  "image/4.png",
                  "image/5.png",
                  "image/6.png"];

    var img = document.createElement("img");
    var randomVal = Math.floor(Math.random()*images.length);
    newArr.push(images[randomVal]);
    img.src = images[randomVal];
    document.getElementsByClassName("result")[0].appendChild(img);
    console.log(newArr);
 };

<img class="btn" src="btn.png">
<img class="btn" src="btn.png">
<img class="btn" src="btn.png">
<img class="btn" src="btn.png">
<img class="btn" src="btn.png">
<div class='result'></div>