具有onclick更改图像的动态ID的getElementById

getElementById with dynamic ID for onclick change images

本文关键字:动态 getElementById ID 图像 onclick 具有      更新时间:2023-09-26

我有id=image1 image2 image3等…并且想要使用一个getElementById。我该怎么做?我可以在xxxxxxx中输入什么?

HTML:
<img id="image@(i.ToString)" onclick=diffImage(this) src="http://idratherbewriting.com/wp-content/uploads/2013/03/minusb.jpg" data-toggle="collapse" data-target="#demo@(i.ToString)" /> 
JavaScript:
function diffImage(img) {
var image = document.getElementById(xxxxxxx);
if (image.src.match("http://idratherbewriting.com/wp-content/uploads/2013/03/minusb.jpg")) {
image.src = "http://idratherbewriting.com/wp-content/uploads/2013/03/plus3.jpg";
  } else {
 image.src = "http://idratherbewriting.com/wp-content/uploads/2013/03/minusb.jpg";
   }
}

点击图像时似乎想要更改图像。由于您将this发送到函数,因此不需要document.getElementById(),因此参数中有元素。

试试这个:

function diffImage(image) {
    if (image.src.match("http://idratherbewriting.com/wp-content/uploads/2013/03/minusb.jpg")) {
        image.src = "http://idratherbewriting.com/wp-content/uploads/2013/03/plus3.jpg";
    } else {
        image.src = "http://idratherbewriting.com/wp-content/uploads/2013/03/minusb.jpg";
    }
}
for (var i=1; i < 5; i++) {
  var image = document.getElementById('image' + i);
}