如何让一个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数组的循环做点击操作？

回答

相关问题