Question

在我的HTML中，我有4个像这样的图像标记

  <div id="imgContainer">
    <img id = "crystal1" src="assets/images/crystal1.jpg" alt="crystal1">
    <img id = "crystal2" src="assets/images/crystal2.jpg" alt="crystal2">
    <img id = "crystal3" src="assets/images/crystal3.jpg" alt="crystal3">
    <img id = "crystal4" src="assets/images/crystal4.jpg" alt="crystal4">
  </div>

在我的JS文件中，我有这个函数，它在1-12之间选择4个随机值并将它们推送到全局数组中。

function generateCrystalNumber(){
for (var i = 0; i<4; i++){
crystalNumvar = Math.floor(Math.random()*12) + 1;
crystalNumbers.push(crystalNumvar);

}

如何使用javascript或jquery将数组中的每个值分配给不同的图像标记？

Answer 1

function generateCrystalNumber(){
var crystalNumbers = [];
  for (var i = 0; i<4; i++){
    crystalNumvar = Math.floor(Math.random()*12) + 1;
    crystalNumbers.push(crystalNumvar); 
  }
  document.getElementById('imgContainer').childNodes.forEach(function(elm){

    elm.value = crystalNumbers.shift();

  });
}

generateCrystalNumber();

<div id="imgContainer">
    <img id = "crystal1" src="assets/images/crystal1.jpg" alt="crystal1">
    <img id = "crystal2" src="assets/images/crystal2.jpg" alt="crystal2">
    <img id = "crystal3" src="assets/images/crystal3.jpg" alt="crystal3">
    <img id = "crystal4" src="assets/images/crystal4.jpg" alt="crystal4">
  </div>

Answer 2

// To associate a random number in image's data attribute
$('img').each(function(){
    $(this).data('data-random-Number', generateCrystalNumber());
}

function generateCrystalNumber(){
    //for (var i = 0; i<4; i++){ -- For loop is not needed
       return (Math.floor(Math.random()*12) + 1);
       // crystalNumbers.push(crystalNumvar); 
    //}
}

Answer 3

使用.each()功能并循环覆盖您的图片，使用data-*

添加属性

您可以摆脱数组并在.each()函数中生成随机数。

function getRandomInt() {
    return Math.floor(Math.random()*12) + 1;
}
$(document).ready(function () {
    $('img').each(function () {
        $(this).attr('data-crystal', getRandomInt());
    });
});

＆＃13;

var crystalNumbers = [];
    function generateCrystalNumber() {
        for (var i = 0; i < 4; i++) {
            crystalNumvar = Math.floor(Math.random() * 12) + 1;
            crystalNumbers.push(crystalNumvar);
        }
    }
    generateCrystalNumber();
    $(document).ready(function () {
        $('img').each(function (index) {
            $(this).attr('data-crystal', crystalNumbers[index]);
        })
        
        $('img').on('click', function(){
            console.log($(this).attr('data-crystal'));
        });
    })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imgContainer">
    <img id="crystal1" src="assets/images/crystal1.jpg" alt="crystal1">
    <img id="crystal2" src="assets/images/crystal2.jpg" alt="crystal2">
    <img id="crystal3" src="assets/images/crystal3.jpg" alt="crystal3">
    <img id="crystal4" src="assets/images/crystal4.jpg" alt="crystal4">
</div>

＆＃13;

Answer 4

我认为您正在寻找一种解决方案，在点击图像时，您希望显示随机数生成的随机图像。下面的代码可以是一个开始。

代码获取图像元素引用并将它们推送到imgElems数组。
调用generateCrystalNumber()以生成随机数并存储在数组
点击事件已在imgContainer上注册，$(document).ready(function () { var crystalNumbers = []; var imgElems = []; var path = "assets/images/crystal"; imgElems.push(document.getElementById('crystal1')); imgElems.push(document.getElementById('crystal2')); imgElems.push(document.getElementById('crystal3')); imgElems.push(document.getElementById('crystal4')); generateCrystalNumber(); function generateCrystalNumber() { for (var i = 0; i < 4; i++) { var crystalNumvar = Math.floor(Math.random() * 12) + 1; crystalNumbers.push(crystalNumvar); } } $('body').on('click', '#imgContainer',function (e) { var id = e.target.id; $('#' + id).attr('src', path + crystalNumbers[id.slice(-1)-1] + ".jpg"); }); });是所有元素的父div。
在内部事件处理程序中，代码确定单击了哪个图像，并通过从随机数数组中读取来更改src属性。

注意：您可能需要进一步调整逻辑以根据您的要求重置随机数

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imgContainer">
    <img id = "crystal1" src="assets/images/crystal1.jpg" alt="crystal1">
    <img id = "crystal2" src="assets/images/crystal2.jpg" alt="crystal2">
    <img id = "crystal3" src="assets/images/crystal3.jpg" alt="crystal3">
    <img id = "crystal4" src="assets/images/crystal4.jpg" alt="crystal4">
  </div>

copy('img/portada/170x243/zzzzz.jpg', 'img/static/zzzzz.jpg')

使用javascript或jquery将数组中的值分配给HTML元素

4 个答案: