javascript - 多个 ID 调用同一个 JavaScript 函数

Question

我正在尝试一个 JavaScript，它需要图像的 Id 和图像的 onclick 来执行某些功能。但是我有同一个图像的多个 ID，其中 onclick 图像的 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

为什么不在 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 的变化。