0

テーブル フィルターをよりエレガントにしたいと考えています。基本的に、このテーブルの下部には、テーブル内の属性に基づいて行を非表示および表示するためのリンクがあります。それは私が望むように機能していますが、jQueryのより少ない行を使用して記述できたように感じます...誰かアイデアはありますか?

これがjsfiddleです：http://jsfiddle.net/vC88q/1/

そしてコード：

<!--*******************************************************
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>
4

5 に答える 5

3 
$(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();
            }
        });
    }
);
于 2012-05-03T03:52:10.133 に答える
2

ここにデモがあります

$(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()
        }
    });
});​
于 2012-05-03T03:48:46.677 に答える
2

私はこの種のことのために 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で。

于 2012-05-03T03:50:37.857 に答える
1

以下は、すべてのコードを置き換える必要があります。

$(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();
    });
});​

編集：「すべて」リンクを修正するために更新

于 2012-05-03T03:48:02.683 に答える
1

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();
    });
于 2012-05-03T03:49:30.977 に答える