多個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變化。

Answer 2

試試這個;）

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"; 
    } 
    } 
} 

你把條件放在外面for循環;