jQuery：如何使用相同的點擊功能觸發不同的操作（使用不同的元素）

Question

我試圖通過特定的點擊功能更改欄的背景顏色。單擊的每個元素（下拉列表）都會更改同一個欄的顏色。但我不想要5個點擊功能，我正在嘗試其他方法，但直到現在，沒有任何工作。誰能告訴我我做錯了什麼？

有了這段代碼，控制檯說「目標[我]不是一個功能......」我知道這是一種基本的，但我搜索和搜索，似乎沒有什麼適合我。

var targets=['#first-img, #second-img, #third-img, #fourth-img, #fifth-img']; 

    for(var i=0; i<targets.length; i++){ 
     targets[i].click(function(){ 
      $('#middle-bar').css('color','green'); 
      $('#middle-bar').css('color','black'); 
      //and so on... 


     }) 
    } 

編輯

好，有了這個代碼，我沒有得到任何錯誤，但沒有任何反應，顏色不會改變

var targets=['#first-img', '#second-img', '#third-img', '#fourth-img', '#fifth-img']; 

    for(var i=0; i<targets.length; i++){ 
     $(targets[i]).click(function(){ 
      $('#middle-bar').css('color','green'); 
      $('#middle-bar').css('color','black'); 
     }) 
    } 

編輯：

這是HTML：

個

 <div class="col-6 vertical-middle"> 
      <div class="text-left"> 
       <span class="font1 uppercase s22 white">Cook With</span> 
      </div> 

     </div> 
     <div class="col-6 vertical-middle"> 
      <div class="text-right"> 

       <div class="dropdown-images" id="drop-img"> 
        <img src="http://via.placeholder.com/50x30" alt="Nestlé"> 

        <div class="custom-drop-images"> 

         <img id="first-img" src="http://via.placeholder.com/50x30" alt=""> 
         <img id="second-img" src=" first-img http://via.placeholder.com/50x30" onClick="" alt=""> 
         <img id="third-img" src="http://via.placeholder.com/50x30" alt=""> 
         <img id="fourth-img" src="http://via.placeholder.com/50x30" alt=""> 
         <img id="fifth-img" src="http://via.placeholder.com/50x30" alt=""> 

        </div> 
       </div> 

      </div> 

     </div> 


    </div> 

而且目前的JS：

var targets=['#first-img', '#second-img', '#third-img', '#fourth-img', '#fifth-img']; 

for(var i=0; i<targets.length; i++){ 
    $(targets[i]).click(function(){ 
     $('#middle-bar').css('color','green'); 
     $('#middle-bar').css('color','black'); 
     $('#middle-bar').css('color','brown'); 
     $('#middle-bar').css('color','blue'); 
     $('#middle-bar').css('color','red'); 
    }) 
} 

輸出爲奇數，酒吧仍然不會改變，但我可以看到第二圖像背景變紅...

Answer 1

我發現通過普通的舊JavaScript的一個簡單的解決方案：

<script type="text/javascript"> 
    function changeColor(color) { 
     document.getElementById('middle-bar').style.background = color; 
    } 
</script> 

，然後將HTML：

<img id="second-img" src=" first-img http://via.placeholder.com/50x30" onClick="changeColor('red');" alt=""> 

謝謝大家的幫助:)

Answer 2

我的天堂」你真的沒有看過你的代碼，但我看到的第一件事是你的數組只有一個元素。您的單引號包裹逗號分隔值，因此您只有一個元素。 （'click'，function（e）{//你的代碼在這裏））;你可以使用$（targets [i]）。

targets [i]不是選擇器。它只是一個字符串，而不是一個函數。您無法將事件附加到字符串。您需要將該字符串包裝在$（targets [i]）中以使其成爲有效的選擇器函數。

希望有所幫助。

Answer 3

如果陣列是硬編碼並不會改變，那麼你可以只是做

$('#first-img, #second-img, #third-img, #fourth-img, #fifth-img').click(function(){ 
    //your code here 
}) 

如果陣列動態填充他們需要的是jQuery選擇，這就是爲什麼你所得到的target[i]是不是一個函數錯誤。對，你可以做到這一點

$(targets[i]).click(function(){...

也，你的數組只有一個元素，引號是圍繞整個事情，而不是每個元素

Answer 4

「好，有了這個代碼，我沒有得到任何錯誤，但沒有任何反應，顏色不會改變「

確保您的DOM元素在代碼運行時已經存在。你可以保證你的代碼（文檔）包裝你的代碼存在。準備這樣的：

$(document).ready(function(){ 

var targets=['#first-img', '#second-img', '#third-img', '#fourth-img', '#fifth-img']; 

for(var i=0; i<targets.length; i++){ 
    $(targets[i]).click(function(){ 
     $('#middle-bar').css('color','green'); 
     $('#middle-bar').css('color','black'); 
    }) 
} 
}); 

此外，還建議通過JQuery的，你使用附加.ON活動，以這種方式：

$('#elementID').on('click', function(e){ 
    // your code here 
});