Question

我想创建一个切换功能，因此，当我单击模具的图像时，它会根据模具的眼睛数变为另一幅图像，如果再次单击，则会返回到原始图像。我将骰子值存储在and数组中。

我存储是否在数组中单击了图像（（0）表示未单击，（1）表示被单击）。这两种方法都可以正常工作（单击和取消单击）。但是我找不到改变所点击图像的.src的方法，具体取决于它有多少个眼睛。

这是我到目前为止所拥有的：

var dice = new Array(0,0,0,0,0,0);
var hold = new Array(0,0,0,0,0,0);
var diceImg = document.getElementsByClassName("dice");

for(var i = 0; i < diceImages.length; i++){
        diceImages[i].addEventListener("click",function(){
            if (hold[this.dataset.index] == 0){
                hold[this.dataset.index] = 1;
                this.src = '/images/'+(dice[i])+'.png'
            }
            else if (hold[this.dataset.index] == 1)
                hold[this.dataset.index] = 0;
                this.src = '/images/l'+(dice[i])+'.png'       
         });
    }

HTML中的骰子图像

<div id="dice">
<img id="die0" data-index="0" class="dice" src="images/1.png">
<img id="die1" data-index="1" class="dice" src="images/2.png">
<img id="die2" data-index="2" class="dice" src="images/3.png">
<img id="die3" data-index="3" class="dice" src="images/4.png">
<img id="die4" data-index="4" class="dice" src="images/5.png">
<img id="die5" data-index="5" class="dice" src="images/6.png">
</div>

在JavaScript中更改图片的.src

0 个答案: