Question

我想从表中过滤某些行，并使用类对行进行分类。

以下代码使我能够显示和隐藏分类为“QUO”和“CAL”的行数据（最终会有其他类别。

有人能指出我更优雅的解决方案，所以我不必像下面的那样重复每个类别的代码吗？

谢谢！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<html>
<head>
    <title>Untitled</title>
    <style>

    </style>
    <script src="Javascript/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    $("#toggle_ac_cal").click(function()                
    {
        var checked_status = this.checked;
        if (checked_status==true)
        {
        $(".ac_cal").show()
        }
        else
        {
        $(".ac_cal").hide()
        }
    });     
    $("#toggle_ac_quo").click(function()                
    {
        var checked_status = this.checked;
        if (checked_status==true)
        {
        $(".ac_quo").show()
        }
        else
        {
        $(".ac_quo").hide()
        }
    });         
    });
    </script>
</head>
<body>
<input type="checkbox" id="toggle_ac_cal" checked="checked" />CAL<br/>
<input type="checkbox" id="toggle_ac_quo" checked="checked" />QUO<br/>
<table>
<tbody>
<tr class="ac_cal">
<td>CAL</td>
<td>10 Oct</td>
<td>John Barnes</td>
</tr>
<tr class="ac_cal">
<td>CAL</td>
<td>10 Oct</td>
<td>Neil Burton</td>
</tr>
<tr class="ac_quo">
<td>QUO</td>
<td>11 Oct</td>
<td>Neil Armstrong</td>
</tr>
</tbody>
</table>
</body>
</html>

Answer 1

你可以给你的可点击元素（按钮？它们是什么）两个类：“toggler”然后像“target：ac_cal”或“target：ac_quo”。然后，您可以为所有这些处理程序分配相同的处理程序：

$('.toggler').click(function() {
  var target = this.className.replace(/target:(\w*)/, "$1");
  $('.' + target)[this.checked ? "show" : "hide"]();
});

这样做是从切换器自己的类字符串中提取“toggler”按钮的预期目标的类名。然后它会在受影响的目标上调用“show”或“hide”。

编辑 - 哦，durr，我向下滚动找到你的复选框:-)所以那些看起来像这样：

<input type="checkbox" id="toggle_ac_cal" checked="checked" class='toggler target:ac_cal'/>CAL<br/>
<input type="checkbox" id="toggle_ac_quo" checked="checked" class='toggler target:ac_quo'/>QUO<br/>

Answer 2

您可以将代码（不更改标记）缩减至：

$("[id^='toggle_'").click(function() {
  $("." + this.id.replace('toggle_','')).toggle(this.checked);
});

但是，如果你给了你的toggle元素一个类，比如.toggle你可以清理原始选择器，如下所示：

$(".toggle").click(function() {
  $("." + this.id.replace('toggle_','')).toggle(this.checked);
});

你也可以给他们一个类，并使用该值作为目标类，如下所示：

<input type="checkbox" class="toggle" value="ac_cal" />

然后你的jQuery就是这个，简短而简单：

$(".toggle").click(function() {
  $("." + this.value).toggle(this.checked);
});

Answer 3

试试这个（demo）：

HTML（id应与表中的类匹配）：

<input type="checkbox" id="ac_cal" checked="checked" />CAL<br/>
<input type="checkbox" id="ac_quo" checked="checked" />QUO<br/>

脚本：

$(document).ready(function () {
    $("input[id^=ac]").click(function()                
    {
        $('tr.' + this.id)[this.checked ? "show" : "hide"]();
    })       
});

jquery中的表过滤 - 请更优雅的解决方案

3 个答案: