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