Jquery优化[重复]答案

【问题标题】：Jquery optimisation [duplicate]Jquery优化[重复]
【发布时间】：2016-07-01 23:10:46
【问题描述】：

我用 jquery 制作了一个动画，我发现自己有 15400 行代码。我有 26 个 div（图像），ID 为：.article1、article2、.article3、.article4、... article26。当我单击其中一个时，许多翻译将应用于其他翻译。我想减少代码行数，我尝试了一个 For 循环：

for (var i = 1 ; i<=26 ; i++)
{
    $('.article' + i]).click(function(){
         -- animations --
    }
}

但它似乎不起作用，因为 i 的值将采用循环的最后一个值 (26)，因此点击功能仅适用于 id 为 .article26 的 div。

谢谢。

【问题讨论】：

您的-- animations -- 中是否需要i？你可以使用$(this)
查看 jQuery not 选择器以选择所有 not this。您还说您正在使用 ID，但所有这些文章都表示为类。这是一个错字吗？这也可能导致问题。
我假设$('.article' + i]) 在这里只有一个语法错误（注意]）。这在你的真实代码中存在吗？
对，就像@4castle 说的...选择 this 的东西，使用 this... 但是要选择其他的所有东西，使用不是这个，或者只从这个中删除类。
使用像$('[class^=article]')这样的jQuery按类名获取元素。然后绑定事件$('[class^=article]').click(function() { /* Do something here. */ })。

标签： javascript jquery optimization

【解决方案1】：

这可能是一种在许多不同命名元素上管理动画的方法...

function AnimationCtrl($) {
  var els = $('[class^="article"]');
  
  els.click(function(event) {
    $(this).toggleClass('is-active');
  });
}

jQuery(document).ready(AnimationCtrl);

[class^="article"] {
  padding: .5em 1em;
  background: cyan;
  border: 1px solid lightseagreen;
  display: inline-block;
  margin: .2em .5em;
  cursor: pointer;
  transition: 500ms all linear;
} 

.is-active[class^="article"] {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="article-1">elemnt number 1</div>
<div class="article-2">elemnt number 2</div>
<div class="article-3">elemnt number 3</div>
<div class="article-4">elemnt number 4</div>
<div class="article-5">elemnt number 5</div>
<div class="article-6">elemnt number 6</div>
<div class="article-7">elemnt number 7</div>
<div class="article-8">elemnt number 8</div>
<div class="article-9">elemnt number 9</div>
<div class="article-10">elemnt number 10</div>
<div class="article-11">elemnt number 11</div>
<div class="article-12">elemnt number 12</div>
<div class="article-13">elemnt number 13</div>
<div class="article-14">elemnt number 14</div>
<div class="article-15">elemnt number 15</div>
<div class="article-16">elemnt number 16</div>
<div class="article-17">elemnt number 17</div>
<div class="article-18">elemnt number 18</div>
<div class="article-19">elemnt number 19</div>
<div class="article-20">elemnt number 20</div>
<div class="article-21">elemnt number 21</div>
<div class="article-22">elemnt number 22</div>
<div class="article-23">elemnt number 23</div>
<div class="article-24">elemnt number 24</div>
<div class="article-25">elemnt number 25</div>
<div class="article-26">elemnt number 26</div>

【讨论】：