Jquery优化

Question

我用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），因此click函数仅适用于id为.article26的div。

谢谢。

Answer 1

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

＆＃13;

＆＃13;

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

jQuery(document).ready(AnimationCtrl);

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;