优化 jQuery 代码的重复和平答案

【问题标题】：Optimize repeating peace of jQuery code优化 jQuery 代码的重复和平
【发布时间】：2013-10-04 23:01:11
【问题描述】：

我是 js 和 jQuery 的新手，我写了一些我认为可以优化的代码。这是我所拥有的：

$(".team-member.personX").click(function(){
    $(this).children(".img-mask").attr("src", "images/img-mask-active.png");
    $(".member-info.personX").fadeIn();
});
$(".member-info.personX .close").click(function(){
    $(".team-member.personX .img-mask").attr("src", "images/img-mask.png");
    $(".member-info.personX").fadeOut();
});

主要是我想问有没有一种方法可以在不重复相同代码的情况下将 -- X -- 替换为 1,2,3,4 4 次。任何帮助将不胜感激。

【问题讨论】：

添加另一个包含元素的新类的元素，然后它将适用于所有没有数字的元素。
请发布您的 HTML。有一种更简单的方法可以做你想做的事。

标签： javascript jquery optimization query-optimization

【解决方案1】：

一般来说是关于 Javascript，而不是专门的 jQuery。

实际上是循环的经典示例。您可以使用 for 循环：

for(i = 1; i <= 4; i++)
{
    //actions utilizing i taking values from 1 to 4
}

...字符串可以很容易地与数字结合使用+：

$(".member-info.person" + i).fadeIn(); //an example action

【讨论】：

我之前试过这个 - 不起作用，因为点击人时效果会应用于循环中的所有元素。还有其他想法吗？
@NoSense，我看不出它应该以这种方式工作的任何原因，你能分享你尝试过的确切代码吗？

【解决方案2】：

好的，我想通了。我发现优化代码的最简单方法是使用函数调用。

例子：

function on(x){...}
$(person1).click(function{ on(1) }) and e.t.c.

这不是最好的解决方案，但它简单且有效。

【讨论】：