如何讓一個ID數組的循環做點擊操作？

var topOptions = ["#m1", "#m2", "#m3", "#m4", "#m5", "#m6"]; 
for(i = 0; i < topOptions.length - 1; i++) 
{ 

    $(topOptions[i]).click(function(){ 
     $(topOptions[i]).animate({backgroundColor: '#2c3e50'}, 150); 
     }); 
}

我試圖點擊每個元素時發生的事情，但只有最後一個被觸發。我該怎麼做呢？如何讓一個ID數組的循環做點擊操作？

來源

2017-05-07 tommyzat

$(this).animate ....

，而不是

$(topOptions[i]).animate ....

來源

2017-05-07 11:37:22

試試這個：

var topOptions = ["#m1", "#m2", "#m3", "#m4", "#m5", "#m6"]; 
$.each(topOptions,function(i,item){ 
$(item).animate({backgroundColor: '#2c3e50'}, 150); 
});

來源

2017-05-07 11:27:00 Ashiquzzaman

$("a").click(function(){ 
var topOptions = ["#m1", "#m2", "#m3", "#m4", "#m5", "#m6"]; 
if(jQuery.inArray($(this).attr("id"),topOptions)>-1){ 
$(this).animate({backgroundColor: '#2c3e50'}, 150); 
} 
});

注意，我用的是作爲一個選擇，如果它是一個div或者其他什麼東西改變這種

$（「一）

我想你想要這個功能jQuery.inArray這是否你點擊的ID在topOtions陣列發現

來源

2017-05-07 12:27:31 Osama

注意，你可以使用jQuery動畫不動畫backgroudColor。你可以使用css轉義爲背景顏色設置動畫。這裏是一個解決方案，您可以使用

var ids = ['#id1','#id2','#id3','#id4','#id5']; 
 

 
ids.forEach(function(id){ 
 
\t $(id).click(function(e){ 
 
\t \t $(this).css('backgroundColor', '#2c3e50') 
 
\t }); 
 
});

li{ 
 
\t -webkit-transition: background 0.5s linear; 
 
-moz-transition: background 0.5s linear; 
 
-ms-transition: background 0.5s linear; 
 
-o-transition: background 0.5s linear; 
 
transition: background 0.5s linear; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JavaScript</title> 
 
</head> 
 
<body> 
 
<ul> 
 
\t <li id="id1">id1</li> 
 
\t <li id="id2">id2</li> 
 
\t <li id="id3">id3</li> 
 
\t <li id="id4">id4</li> 
 
\t <li id="id5">id5</li> \t 
 
\t </ul> \t 
 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 

 
</body> 
 
</html>

要了解爲什麼你的for循環最後一個元素工作，請檢查這個答案JavaScript closure inside loops – simple practical example

來源

2017-05-08 08:41:44 azs06

如何讓一個ID數組的循環做點擊操作？

回答

相關問題