Question

我想让我的桌面过滤器更优雅。基本上，此表将在底部具有链接以隐藏和显示基于表中的属性的行。它按照我想要的方式工作，但我觉得我可以使用更少的jQuery来编写代码......任何人都有任何想法？

代码：

<!--*******************************************************
jquery that needs cleaned up appears at the end of this file!
Code is online at JSFIDDLE: http://jsfiddle.net/vC88q/1/
*********************************************************-->
<!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">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
</head>

<body>
    <table> 
        <thead> 
            <tr> 
                <th>Color Table</th>
            </tr> 
        </thead> 
        <tbody> 
            <tr> 
                <td data-color="red">red</td>
            </tr> 
            <tr> 
                <td data-color="white">white</td>
            </tr> 
            <tr> 
                <td data-color="blue">blue</td>
            </tr> 
            <tr> 
                <td data-color="bluewhite">bluewhite</td>
            </tr> 
            <tr> 
                <td data-color="red">red</td>
            </tr>
            <tr> 
                <td data-color="red">red</td>
            </tr> 
            <tr> 
                <td data-color="red">red</td>
            </tr> 
            <tr> 
                <td data-color="blue">blue</td>
            </tr> 
            <tr> 
                <td data-color="blue">blue</td>
            </tr> 
        </tbody> 
    </table> 
    <br />
    <br />
    <div class="filtertable">
        <a href="#" data-color="all">All</a>
        <a href="#" data-color="red">Red</a>
        <a href="#" data-color="white">White</a>
        <a href="#" data-color="blue">Blue</a>
        <a href="#" data-color="bluewhite">Blue and White</a>
    </div>

<script type="text/javascript">

/*******************************************************
Here is the jquery I need help with, how can I reduce the code
I've written? Code is online at JSFIDDLE: http://jsfiddle.net/vC88q/1/
*********************************************************/

$(document).ready(function() 
    { 
    /*****************************************************************
    when users clicks the "all" filter, show all the hidden table rows
    *****************************************************************/
    $('.filtertable a[data-color=all]').click(function() {
        $('td[data-color]').parent().show();
    });
    /****************************************************************
    when users clicks the "red" filter, hide all but red table rows
    *****************************************************************/
    $('.filtertable a[data-color=red]').click(function() {
        $('td[data-color=red]').parent().show();
        $('td[data-color=white]').parent().hide();
        $('td[data-color=blue]').parent().hide();
        $('td[data-color=bluewhite]').parent().hide();
    });
    /*****************************************************************
    when users clicks the "white" filter, hide all but white table rows
    ****************************************************************/
    $('.filtertable a[data-color=white]').click(function() {
        $('td[data-color=white]').parent().show();
        $('td[data-color=red]').parent().hide();
        $('td[data-color=blue]').parent().hide();
        $('td[data-color=bluewhite]').parent().hide();
    });
    /****************************************************************
    when users clicks the "blue" filter, hide all but blue table rows
    *****************************************************************/
    $('.filtertable a[data-color=blue]').click(function() {
        $('td[data-color=blue]').parent().show();
        $('td[data-color=white]').parent().hide();
        $('td[data-color=red]').parent().hide();
        $('td[data-color=bluewhite]').parent().hide();
    });
    /*****************************************************************
    when users clicks the "blue and white" filter, hide all but blue+white table rows
    *****************************************************************/
    $('.filtertable a[data-color=bluewhite]').click(function() {
        $('td[data-color=bluewhite]').parent().show();
        $('td[data-color=white]').parent().hide();
        $('td[data-color=blue]').parent().hide();
        $('td[data-color=red]').parent().hide();
    });
} 
); 
</script>
</body>
</html>

Answer 1

$(document).ready(function()
    {
        $('.filtertable a[data-color]').click(function() {
            var color = $(this).data().color;
            if(color == 'all'){
                 $('td[data-color]').parent().show();
            } else {
                $('td[data-color='+ color +']').parent().show();
                $('td[data-color!='+color+']').parent().hide();
            }
        });
    }
);

Answer 2

Here's a demo

$(function() {
    var td = $('#colortable td');
    $('.filtertable').on('click', 'a', function() {
        var color = this.getAttribute('data-color');
        if (color === 'all') {
            td.parent().show()
        } else {
            td.filter('[data-color=' + color + ']').parent().show()
            td.filter('[data-color!=' + color + ']').parent().hide()
        }
    });
});

Answer 3

我经常使用CSS来做这类事情。

<table id="myTable" class="all">
  <tr class="red"><td>red</td></tr>
  <tr class="yellow"><td>yellow</td></tr>
  <tr class="blue"><td>blue</td></tr>
<table>

<div class="controls">
  <a href="#" data-color="all">All</a>
  <a href="#" data-color="red">Red</a>
  <a href="#" data-color="white">White</a>
  <a href="#" data-color="blue">Blue</a>
</div>

然后在JS

$('.controls a').on('click', function(e){
  e.preventDefault();
  var c= $(this).data('color');
  $('#myTable')[0].className = c;
});

CSS确定何时显示：

tr { display: none; }
.all tr { display: table-row; }
.red tr.red { display: table-row; }
.blue tr.blue { display: table-row; }
.yellow tr.yellow { display: table-row; }

在JSFiddle。

Answer 4

以下内容应该替换您的所有代码。

$(document).ready(function() {
    $('.filtertable a[data-color]').click(function() {
        var $this = $(this), color = $this.data('color');
        if (color !== 'all') {
            $('td[data-color]').parent().hide();
        }
        $('td[data-color' + (color !== 'all' ? '=' + color : '') + ']').parent().show();
    });
});

编辑：已更新以修复所有＆＃39;链路

Answer 5

http://jsfiddle.net/vC88q/6/

    $('.filtertable a[data-color]').click(function() {
        var color = $(this).data().color;
        $('td[data-color=' + color + ']').parent().show();
        $('td[data-color!=' + color + ']').parent().hide();
    });

使用jQuery过滤掉表行的更优雅的方法？

5 个答案: