Question

我试图在隐藏列时尝试使用fontawesome图标进行切换。具有讽刺意味的是，当我提醒一个字符串但警报发生两次时它起作用，而在第二个警报时，该图标会切换回其原始状态。我不太担心警报，因为它不会让我们在那里。但我觉得这很奇怪。这就是我的......

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');
    });

切换列工作正常但切换图标却没有。我试图将toggle类放在复选框的click函数中。感谢任何人都能给我的帮助。我一整天都在努力，而且无处可去。

Answer 1

请查看此工作演示：JSFiddle。

只需在$("input:checkbox").click(function() { var column = "#report ." + $(this).attr("name"); $(this).next('i.fa').toggleClass('fa-toggle-on fa-toggle-off'); $(column).toggle(); });点击事件中插入图标切换代码：

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

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

更新：

如果您坚持原始解决方案，请检查：JSFiddle。

您的代码无法正常工作，因为点击事件已被捕获并传播两次。只是停止传播：

document.getElementById("text-maybe").value = "";

切换字体真棒不工作

1 个答案: