Jquery strike through特定のリスト項目

Question

私はjqueryを習得しており、ポートフォリオの一部として練習しています。私は単純なリストのウェブサイトを作っています。私は、特定のリスト項目の横にあるチェックボックスをクリックして、その項目だけを横切らせたいと思っています。私は働いていないいくつかの方法を試しましたが、これを実行する最良の方法が何であるか分かりません。どんな助けもありがとうございます。ここで

は私のHTMLです：ここでは

<div class="container"> 
<ul> 
    <div id='bigitems'> 
    <li> 
     <h2 class="listHeader">Big Items</h2> 
     <div class="bigappendbuttondiv"> 
      <button id="bigappendbutton">Append text</button> 
      <label for="bigappendbutton" class="appendbutton"><p class="plus">+</p></label> 
     </div> 
    </li> 
    <li class="listitem"> 
     <div class="checkbox"> 
     <input type="checkbox" value="1" id="checkboxInput" class="striker" name=""/> 
     <label for= "checkboxInput"> </label> 
     </div> 
    <input type="text" name="" value="" class="listitemtext" > 
    </li> 
    <li class="listitem"> 
     <div class="checkbox"> 
     <input type="checkbox" value="1" id="checkboxInput2" class="striker" name=""/> 
     <label for= "checkboxInput2"> </label> 
     </div> 
    <input type="text" name="" value="" class="listitemtext"> 
    </li> 
    <li class="listitem"> 
     <div class="checkbox"> 
     <input type="checkbox" value="1" id="checkboxInput3" class="striker" name=""/> 
     <label for= "checkboxInput3"> </label> 
     </div> 
    <input type="text" name="" value="" class="listitemtext"> 
    </li> 
    <li class="listitem"> 
     <div class="checkbox"> 
     <input type="checkbox" value="1" id="checkboxInput4" class="striker" name=""/> 
     <label for= "checkboxInput4"> </label> 
     </div> 
    <input type="text" name="" value="" class="listitemtext"> 
    </li> 
    </ul> 
</div> 

は、私はそれだけがしたいとき、それはすべての李に "ストライカー" クラスを追加し、これを使用して、私のjQuery

$(document).ready(function(){ 
    $(".striker").click(function(){ 
    $(".striker").closest("li").addClass("checked") 

    }); 
}); 

ですチェックマークボタンと同じdivにあるものに追加します。

Answer 1

あなたがここに$(this)参照を使用する必要があり、イベントハンドラの

$(document).ready(function(){ 
    $(".striker").click(function(){ 
    $(this).closest("li").addClass("checked"); 
    }); 
}); 

this内部はイベントがトリガしまった要素を指します。イベントをバインドするために使用されたセレクタを使用する場合、間違いなくすべての要素が選択され、要求された操作が実行されます。