Question

我正在尝试一个JavaScript，它需要一个图像的Id和它执行某些功能的图像的onclick。但是我有多个相同图片的ID，其中onclick＆＃39; ed图像的ID应该由JavaScript处理并且应该执行操作。问题是我无法根据点击获得正确的ID。

这是我的代码

1）MYHTML

<div class="col-md-3 col-sm-6">
<div class="sub-process-block quantity">
    <h3>choose quantity</h3>
    <div id="example" onclick="changeImage()">
       <img src="img/carton-empty.png" id="myImage">
       <img src="img/carton-empty.png" id="myImage1">
       <img src="img/carton-empty.png" id="myImage2">
    </div>
</div>

2）的javascript

<script>
  function changeImage() {
   var imageArray=["myImage","myImage1","myImage2"];
      for(var i=0;i<imageArray.length;i++ ){
        image = document.getElementById(imageArray[i]).onclick;
      }
      if(image.src.match("selected")) {
        image.src="img/carton-empty.png";
      }else{
        image.src = "img/carton selected.png";
      }
  }

Answer 1

试试这个;）

science

你把条件置于循环之外;

Answer 2

为什么不在JS中为图像添加事件监听器？然后你可以检查它是否被选中并相应地更新源

// get all images and put them in an array
var images = [].slice.call(document.querySelectorAll('img'));

// loop through images and add event listener
images.forEach(function(image) {
    image.addEventListener('click', onImageClick);
});

// on click, check if image is selected and update src
function onImageClick(e) {
    var image = e.target;

  if (image.src.match("selected")) {
    // is selected, now unselected it and update src
    image.setAttribute('src', 'img/carton-empty.png');
  } else {
    // is not selected, now select it and update src
    image.setAttribute('src', 'img/carton selected.png');
  }
}

https://jsfiddle.net/0qzdsf8r/4/

检查开发工具中的图像元素，并查看类和src更改。

多个ID调用相同的JavaScript函数

2 个答案: