如何让一个带有一组 ID 的循环在单击时执行某些操作？答案

【问题标题】：How do I have a loop with an array of IDs do something upon clicking?如何让一个带有一组 ID 的循环在单击时执行某些操作？
【发布时间】：2017-05-07 11:24:16
【问题描述】：

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

我试图在单击每个元素时发生一些事情，但是只有最后一个被触发。我该怎么做？

【问题讨论】：

标签： javascript jquery arrays loops

【解决方案1】：

$(this).animate ....

而不是

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

【讨论】：

【解决方案2】：

试试这个：

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

【讨论】：

【解决方案3】：

 $("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 或其他东西，我会使用 a 作为选择器来改变它

$("a)

我想你想要这个函数 jQuery.inArray 来检查你点击的 id 是否在 topOtions 数组中

【讨论】：

【解决方案4】：

注意，您不能使用 jQuery animate 为 backgroudColor 设置动画。您可以使用 css tansition 为背景颜色设置动画。这是您可以使用的解决方案

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

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

li{
	-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>
	<li id="id1">id1</li>
	<li id="id2">id2</li>
	<li id="id3">id3</li>
	<li id="id4">id4</li>
	<li id="id5">id5</li>	
	</ul>	
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

</body>
</html>

要了解为什么您的 for 循环适用于最后一个元素，请查看此答案 JavaScript closure inside loops – simple practical example

【讨论】：