Question

我有一个带有class =“ btn”的图像数组。单击后，侦听器将使用图像arr中的图像随机替换btn.src。

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

如何从一个类的数组推送到javascirpt中的另一个数组？

1 个答案: