アレイベースの要素

Question

上のクラスを変更する私は約20-100要素、ID「xxx_view_ & & &」と外側のdivに包まれたテキスト、上の独自のID「xxx_view_ch_ & & &」とそれぞれを持っています。ユーザがエレメント全体（「xxx_view_ & & &」）をクリックすると、「xxx_view_ch_ & & &」のIDを持つエレメントのクラスを変更したいとします。

私は現在、このコードを使用します。私は私が他のリストに追加したい項目を選択することができ、リストのような「ToDoの-リスト」を作りたい

$(document).ready(function(){ 
 

 
    $('#reci_view_01').click(function(){ 
 
    $('#reci_view_ch_01').toggleClass('not_active header'); }); 
 

 
    $('#reci_view_02').click(function(){ 
 
    $('#reci_view_ch_02').toggleClass('not_active header'); }); 
 
    
 
    $('#reci_view_03').click(function(){ 
 
    $('#reci_view_ch_03').toggleClass('not_active header'); }); 
 
    
 
    $('#reci_view_04').click(function(){ 
 
    $('#reci_view_ch_04').toggleClass('not_active header'); }); 
 
    
 
    $('#reci_view_05').click(function(){ 
 
    $('#reci_view_ch_05').toggleClass('not_active header'); }); 
 

 
});

.not_active { 
 
    text-decoration: line-through !important; 
 
    color: darkgray; 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css"> 
 

 
    <div class="ui list"> 
 
     <a id="reci_view_01" class="item"> 
 
     <i class="remove circle outline icon"> </i> 
 
     <div class="content"> 
 
      <div id="reci_view_ch_01" class="header">Test 1</div> 
 
     </div> 
 
     </a> 
 
     <a id="reci_view_02" class="item"> 
 
     <i class="remove circle outline icon"> </i> 
 
     <div class="content"> 
 
      <div id="reci_view_ch_02" class="header">Test 2</div> 
 
     </div> 
 
     </a> 
 
     <a id="reci_view_03" class="item"> 
 
     <i class="remove circle outline icon"> </i> 
 
     <div class="content"> 
 
      <div id="reci_view_ch_03" class="header">Test 3</div> 
 
     </div> 
 
     </a> 
 
     <a id="reci_view_04" class="item"> 
 
     <i class="remove circle outline icon"></i> 
 
     <div class="content"> 
 
      <div id="reci_view_ch_04" class="header">Test 4</div> 
 
     </div> 
 
     </a> 
 
     <a id="reci_view_05" class="item"> 
 
     <i class="remove circle outline icon"></i> 
 
     <div class="content"> 
 
      <div id="reci_view_ch_05" class="header">Test 5</div> 
 
     </div> 
 
     </a> 
 
    </div>

を。私は配列の中に方法があるかもしれないと思ったが、私はJavaScriptについてよく知らない。

Answer 1

共通のクラスを使用して、すべての.item要素にイベントをフックできます。次に、DOM traversalを使用して、必要な子要素find()を使用することができます。この場合

は私がreci_viewとreci_view_chクラスを追加しました：

$('.reci_view').click(function() { 
 
    $(this).find('.reci_view_ch').toggleClass('not_active header'); 
 
});

.not_active { 
 
    text-decoration: line-through !important; 
 
    color: darkgray; 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css"> 
 

 
<div class="ui list"> 
 
    <a id="reci_view_01" class="item reci_view"> 
 
    <i class="remove circle outline icon"> </i> 
 
    <div class="content"> 
 
     <div id="reci_view_ch_01" class="header reci_view_ch">Test 1</div> 
 
    </div> 
 
    </a> 
 
    <a id="reci_view_02" class="item reci_view"> 
 
    <i class="remove circle outline icon"> </i> 
 
    <div class="content"> 
 
     <div id="reci_view_ch_02" class="header reci_view_ch">Test 2</div> 
 
    </div> 
 
    </a> 
 
    <a id="reci_view_03" class="item reci_view"> 
 
    <i class="remove circle outline icon"> </i> 
 
    <div class="content"> 
 
     <div id="reci_view_ch_03" class="header reci_view_ch">Test 3</div> 
 
    </div> 
 
    </a> 
 
    <a id="reci_view_04" class="item reci_view"> 
 
    <i class="remove circle outline icon"></i> 
 
    <div class="content"> 
 
     <div id="reci_view_ch_04" class="header reci_view_ch">Test 4</div> 
 
    </div> 
 
    </a> 
 
    <a id="reci_view_05" class="item reci_view"> 
 
    <i class="remove circle outline icon"></i> 
 
    <div class="content"> 
 
     <div id="reci_view_ch_05" class="header reci_view_ch">Test 5</div> 
 
    </div> 
 
    </a> 
 
</div>