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

Question

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

然后，我需要将随机选择的 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>