フォントの切り替えがうまくいきません

Question

私はフォントが隠されているときに切り替えるためにフォントワームアイコンを取得しようとしています。皮肉なことに、私は文字列に警告するが、警告は2回起こり、2番目の警告ではアイコンが元の状態に戻る。私はそれが私たちにはないので、警報についてあまり心配していません。しかし、私はそれが奇妙だと思った。ここで

はHTML

<div id="user-options"> 
     <p><label class="links"><input type="checkbox" class="hidden" name="col_1" checked="checked" /><i class="fa fa-toggle-on"></i> First Name</label></p> 
     <p><label class="links"><input type="checkbox" class="hidden" name="col_2" /><i class="fa fa-toggle-off"></i> Last Name</label></p> 
     <p><label class="links"><input type="checkbox" class="hidden" name="col_3" checked="checked" /><i class="fa fa-toggle-on"></i> Email</label></p> 
    </div> 

    <table id="report"> 
     <thead> 
      <tr> 
       <th class="col_1">First Name</th> 
       <th class="col_2">Last Name</th> 
       <th class="col_3">Email</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td class="col_1">Kevin</td> 
       <td class="col_2">Smith</td> 
       <td class="col_3">kevin@gmail.com</td> 
      </tr> 
      <tr> 
       <td class="col_1">Jim</td> 
       <td class="col_2">James</td> 
       <td class="col_3">John@gmail.com</td> 
      </tr> 
     </tbody> 
    </table> 

...私が持っているものであると列を切り替えるJavascriptを

$("input:checkbox:not(:checked)").each(function() { 
     var column = "#report ." + $(this).attr("name"); 
     $(column).hide(); 
     }); 
    $("input:checkbox").click(function(){ 
     var column = "#report ." + $(this).attr("name"); 
     $(column).toggle(); 
     }); 


    $('label.links').click(function(){ 
    $(this).find('i.fa').toggleClass('fa-toggle-on fa-toggle-off'); 
    }); 

は正常に動作しますが、アイコンをトグルすることはありません。私は、チェックボックスのクリック機能の中にトグルクラスを配置しようとしました。誰でも私に与えることができるすべてのおかげで、ありがとう。私はこの一日中働いていて、どこにもいません。

Answer 1

このデモを確認してください：JSFiddle

ちょうどinputクリックイベントにコードをトグルアイコンを置く：

​​

==========================

更新日：

元の解決方法に固執する場合は、JSFiddleを確認してください。

クリックイベントがキャプチャされて2回伝播されるため、コードが機能しません。ただ、伝播を停止します。

$("input:checkbox").click(function(e) { 
    var column = "#report ." + $(this).attr("name"); 
    $(column).toggle(); 
    e.stopPropagation(); 
});