フォントを変更するulのクラスを切り替える

Question

私は非常にjavacriptに新しいです& jQueryとボタンをクリックするとクラスを切り替えることに問題があります。目的の出力は、ユーザーがボタンをクリックしたときにアイテムを追加させることです。それはうまく動作します。しかし、checkをリストから削除したい場合、ユーザーが<li>のボタンをクリックしたときに、取り消し線になるようにフォントを変更することはできません。

私は近くにいると思うが、何か面白さがある。 何か助けていただければ幸いです。

CODE：

function checkItem(element) { 
    // toggles the class shopping-item__checked when button inside the parent <li> is clicked 
    element.parent('li').toggleClass('.shopping-item__checked'); 
    console.log(element); 
} 

// Event listeners 
$(document).ready(function() { 
    console.log("ready!"); 
    $('#js-shopping-list-form').submit(function (event) { 
     event.preventDefault(); 
     addItem(state, $('#shopping-list-entry').val()); 
     renderList(state, $('.shopping-list')); 
    }); 
    $('ul.shopping-list > li').click(checkItem($(this).closest('shopping-item'))); 
}); 

HTML： ''

<div class="container"> 
    <h1>Shopping List</h1> 
    <form id="js-shopping-list-form"> 
     <label for="shopping-list-entry">Add an item</label> 
     <input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli"> 
     <button type="submit">Add item</button> 
    </form> 
    <ul class="shopping-list"> 
     <li> 
      <span class="shopping-item">apples</span> 
      <div class="shopping-item-controls"> 
       <button class="shopping-item-toggle"> 
        <span class="button-label">check</span> 
       </button> 
       <button class="shopping-item-delete"> 
        <span class="button-label">delete</span> 
       </button> 
      </div> 
     </li> 

Answer 1

削除toggleclassから、

function checkItem(element) { 
    // toggles the class shopping-item__checked when button inside the parent <li> is clicked 
    element.parent('li').toggleClass('shopping-item__checked'); 
    console.log(element); 
} 

もuがあなたは、イベントハンドラに間違った方法を結合している代替

function checkItem(element) { 
    // toggles the class shopping-item__checked when button inside the parent <li> is clicked 
    if(element.parent('li').hasClass('shopping-item__checked')){ 
     element.parent('li').removeClass('shopping-item__checked'); 
    }else{ 
     element.parent('li').addClass('shopping-item__checked'); 
    } 
    console.log(element); 
} 

Answer 2

として次のことを試すことができます。

$('ul.shopping-list > li').click(checkItem($(this).closest('shopping-item'))); 

次のようにイベント情報を渡す必要があります。

function checkItem(event) { 
    //event information is passed. target contains the target element on which the event was fired. in this case the check button 
    var element = $(event.target); 
    // toggles the class shopping-item__checked when button inside the parent <li> is clicked 
    //element.parent('li').toggleClass('.shopping-item__checked'); 
    element.closest('li').find('span.shopping-item').css('text-decoration','line-through'); 
    console.log(element); 
} 

// Event listeners 
$(document).ready(function() { 
    console.log("ready!"); 
    $('#js-shopping-list-form').submit(function (event) { 
     event.preventDefault(); 
     addItem(state, $('#shopping-list-entry').val()); 
     renderList(state, $('.shopping-list')); 
    }); 
    //bind each check button with the check item function 
    $('ul.shopping-list > li > div.shopping-item-controls > button.shopping-item-toggle').on('click', {event_data:this}, checkItem); 
}); 

ボタンの内側のスパンを削除するようにHTMLを修正してください。不要だと思います。

<div class="container"> 
    <h1>Shopping List</h1> 
    <form id="js-shopping-list-form"> 
     <label for="shopping-list-entry">Add an item</label> 
     <input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli"> 
     <button type="submit">Add item</button> 
    </form> 
    <ul class="shopping-list"> 
     <li> 
      <span class="shopping-item">apples</span> 
      <div class="shopping-item-controls"> 
       <button class="shopping-item-toggle"> 
        <!--<span class="button-label">check</span>--> 
        <!-- recommend not to use the span, since you will not be able to capture click event of button --> 
        check 
       </button> 
       <button class="shopping-item-delete"> 
        <span class="button-label">delete</span> 
       </button> 
      </div> 
     </li> 

.find()方法は、最も近い一致子を発見しながら.closest()方法は、最も近い祖先を見出します。

https://coderwall.com/p/wxjljq/jquery-find-and-closest-are-your-best-friends

Answer 3

まず物事まずあなたはjQueryのクリックイベントのために間違ったコールバック関数を追加しています。

$('ul.shopping-list > li').click(checkItem($(this).closest('shopping-item'))); 

すぐにcheckItem()を呼び出しているので、あなたが実際にコールバック関数としてundefinedに渡していると、その関数は何も返しません。したがって、li要素をクリックするたびに何もしません。

ファンクション名を追加するだけで、それを修正できます。だから私たちはそれをパラメータとして渡しているだけではありません。

$('ul.shopping-list > li .shopping-item-toggle').click(checkItem); 

この例では、クリックのチェックボタンも対象としています。今、毎回ボタンは、それがcheckItemを呼び出し、そのようにイベントオブジェクトを渡しますクリックされた：

function checkItem(event) { 
    // toggles the class shopping-item__checked when button inside the parent <li> is clicked 
    $(this).closest('li').toggleClass('shopping-item__checked'); 
    console.log(this); 
} 

：まあ、

checkItem(event);は、それが通過したことにする要素を期待しているあなたのcheckItem機能を見てみると、その一部を変更することができます

ここでいくつか変更しました。私は、最も近いとtoggleClass方法などのそれにチェーンいくつかのものをできる要素がクリックされたと私はjqueryのセレクタでそれを包む表すために起こっている私は、イベントへの要素からパラメータ名を変更して、私はthis

$(this).closest('li').blah.blahに element.parent('li').blah.blahを変更しました。

これは最初の要素では機能しますが、後で追加する要素では機能しないことに気付きました。 addItemを呼び出すたびに、新しいリストアイテムにクリックイベントを追加する必要があるからです。これを行う簡単な方法があり、最初にクリックイベントを追加する方法を変更する必要があります。

$('ul.shopping-list').on('click', 'li .shopping-item-toggle', checkItem); 

ここで使用しているこのテクニックは、イベントデリゲーションと呼ばれています。今、私は実際にショッピングリスト全体にクリックイベントを追加し、買い物リストの中でクリックされたすべてのli .shopping-item-toggleアイテムに火をつけています。つまり、この時点でクリックイベントが発生するために要素を追加する必要はありません。それらは後で追加することができ、それでも動作します。新しいアイテムを追加すると、そのアイテムをクリックすると、クリックイベントが発生します。以下のような