我试图在隐藏列时尝试使用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函数中。感谢任何人都能给我的帮助。我一整天都在努力,而且无处可去。
答案 0 :(得分: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 = "";