多个ID调用同一个JavaScript函数

Question

我正在尝试一个JavaScript，其中它需要一张图片的ID，并在图片的onclick上执行某些功能。 但是我有同一张图片的多个ID，其中应通过JavaScript处理onclick图像的ID，并应执行该操作。 问题是我无法根据点击获得正确的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

尝试这个 ;）

function changeImage(){
  var imageArray = ["myImage", "myImage1", "myImage2"];
  for(var i = 0; i < imageArray.length; i++){
    var image = document.getElementById(imageArray[i]);

    if(image.src.match("selected")){
      image.src = "img/carton-empty.png";
    }else{
      image.src = "img/carton selected.png";
    }
  }
}

您将条件置于循环之外；

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更改。