Jqueryの最適化

Question

jqueryでアニメーションを作成したところ、15400行のコードで自分自身を見つけました。 IDが26のdiv（画像）があります：.article1、article2、.article3、.article4、... article26。 私がそれらのうちの1つをクリックすると、他のものに多くの翻訳が適用されます。 私はコードの行数を減らしたい、私はループのために試してみました：

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

しかし、iの値がループ（26）ので、クリックの最後の値を取るので、動作しないようです関数はid .article26のdivでのみ機能します。

ありがとうございます。

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