Question

每次放入页面时，都会尝试点击交换图像（当前为六个）。我相信我使用data-id =＆＃34;＆＃34;但我不确定如何调整javascript以将每个img标记的每个data-id分配为唯一。谢谢你的帮助。

    <img id="like" src="img/icon-like.svg" onclick="swapImage();" width="16px">


    <script language="JavaScript" type="text/JavaScript">
    var q=0; function swapImage(){ if(q==0){ document.getElementById("like").setAttribute('src','img/icon-liked.svg'); q++; }
    else{ document.getElementById("like").setAttribute('src','img/icon-like.svg'); q--; } }
    </script>

Answer 1

尝试以下方法：

<img id="like" src="img/icon-like.svg" onclick="swapImage();" width="16px">


    <script language="JavaScript" type="text/JavaScript">

var q=0; 
function swapImage(){ 
    document.querySelector("#like").setAttribute('src','img/icon-liked'+ q + '.svg');
  q++;
}
    </script>

现在继续将每个单独的图像重命名为“icon-likes0”，“icon-likes1”，它将分配每个图像。

警告：这只会影响六张图片。

如果你想让它循环执行：

<img id="like" src="img/icon-like.svg" onclick="swapImage();" width="16px">


    <script language="JavaScript" type="text/JavaScript">

var q=0; 
function swapImage(){ 
    document.querySelector("#like").setAttribute('src','img/icon-liked'+ q + '.svg');
  q++;
  if (q == 6) {
    q = 0;
  }
}
    </script>

JavaScript交换图像onClick（页面上相同图像的多个实例）

1 个答案: