如何通过单击 div 数组过滤记录？答案

【问题标题】：How to filter records by clicking div array?如何通过单击 div 数组过滤记录？
【发布时间】：2015-01-22 22:46:22
【问题描述】：

这是指我之前的问题。

how to filter records based on key click?

但现在我正在尝试在 div 元素数组和表之间进行通信，那么我如何根据 div 数组过滤记录。

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
            $(function() { // on page load
                $('#myElId').data('nameYourData', ["22","23","24"]); 
                var myData = $('#myElId').data('nameYourData');
                $("#showMyData").text(myData);
            });
        </script>
    </head>
    <body>
        <div id="myElId">Some element</div><br/>
        MyData:<div id="showMyData"></div>

        <a href="filter_records()">MyData:<div id="showMyData"></div></a> 

        <script> 
            $(function() {
                $('input[type="checkbox"]').change(function() {
                    // We check if one or more checkboxes are selected
                    // If one or more is selected, we perform filtering
                    if($('input[type="checkbox"]:checked').length > 0) {
                        // Get values all checked boxes
                        var vals = $('input[type="checkbox"]:checked').map(function() {
                            return this.value;
                        }).get();

                        // Here we do two things to table rows
                        // 1. We hide all
                        // 2. Then we filter, show those whose value in first <td> matches checkbox value
                        $('table tr')
                            .hide()    // 1
                            .filter(function() {    // 2
                                return vals.indexOf($(this).find('td:first').text()) > -1;
                            }).show();
                    } else {
                        // Show all
                        $('table tr').show();
                    }
                });
            });
        </script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <table border =1 cellspacing="1" cellpadding="1" style="width:100%">
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Marks</th>
            </tr>
            <tr>
                <td>22</td>
                <td>Smith</td>      
                <td>50</td>
            </tr>
            <tr>
                <td>23</td>
                <td>Jackson</td>        
                <td>94</td>
            </tr>
            <tr>
                <td>45</td>
                <td>Doe</td>        
                <td>80</td>
            </tr>
            <tr>
                <td>24</td>
                <td>Doe</td>        
                <td>80</td>
            </tr>
            <tr>
                <td>25</td>
                <td>Doe</td>        
                <td>80</td>
            </tr>
            <tr>
                <td>29</td>
                <td>Doe</td>        
                <td>80</td>
            </tr>
        </table>

        <input type="checkbox" name="vehicle" value="22"> 22<br>
        <input type="checkbox" name="vehicle" value="23"> 23 <br>
        <input type="checkbox" name="vehicle" value="24"> 24<br>
        <input type="checkbox" name="vehicle" value="25"> 25 <br>
        <input type="checkbox" name="vehicle" value="29"> 29<br>
        <input type="checkbox" name="vehicle" value="45"> 45 <br>
    </body>
</html>

但是我如何通过单击文本（如 href）来实现它，并且应该在函数中传递 showdata 变量并且应该过滤行。

【问题讨论】：

您是说您有几个 div 对应于表中数据的不同部分？通过点击相应的div，隐藏表中与该div无关的其他数据？
是的，我有很多 div
只是一个注释，你不需要加载jQuery两次。一次就够了。
你可以发布示例，因为我不擅长 JS/JQuery，但我是 C 程序员。
@DavidBarker 一次就够了吗？所以他根本不需要加载jQuery？

标签： javascript jquery arrays

【解决方案1】：

我稍微修改了您的代码。这个例子可能对你有帮助吗？粘贴到 html 文件中并查看它的工作原理。

编辑：由于请求更改而修改了代码 Edit2：再次修改以将过滤器放入函数中

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){   

                var filterList = [22,23,24];

                //-----Code to implement click listener---
                $('#showMyDataButton').click(function(){
                    if($(this).hasClass('clickableDivOff')){
                        //--------------------------
                        // Turn on Filter
                        //--------------------------

                        //change button effects
                        $(this).removeClass('clickableDivOff');
                        $(this).addClass('clickableDivOn');
                        $(this).text('Filter is on');

                        //applying filter
                        TurnOnFilter(filterList);
                    } else {
                        //--------------------------
                        // Turn off Filter
                        //--------------------------

                        //change button effects
                        $(this).removeClass('clickableDivOn');
                        $(this).addClass('clickableDivOff');
                        $(this).text('Filter is off');

                        //applying filter
                        TurnOffFilter();
                    }
                });
            });

            function TurnOnFilter(filterList){
                //hide all rows first (but not table header);
                $('#dataTable tr').hide();
                $('#dataTable tr:nth-child(1)').show();

                //iterate each id in the filter list
                //within each iteration, check all rows to find a matching id
                // displays matching row.
                for(var i=0;i<filterList.length;i++){
                    $('#dataTable td:nth-child(1)').each(function(){
                        if($(this).text().trim()==filterList[i]){
                            $(this).parent().show();
                        } 
                    });
                }
            }

            function TurnOffFilter(){
                //simple show all the rows
                $('#dataTable tr').show();
            }
        </script>
        <style>
            .clickableDiv{
                border: 2px solid #ddd;
                width: 200px;
                text-align:center;
                cursor: pointer;
            }

            .clickableDivOn{
                font-weight:bold;
                color: white;
                background-color: #58BE97;
            }

            .clickableDivOff{
                font-weight:bold;
                color: white;
                background-color: #EF9012;
            }

            table td, table th{
                width:33%;
                padding-left:5px;
                text-align:left;
            }
        </style>
    </head>
    <body>
        <h2>Filter Test</h2>

        <div id="showMyDataButton" class="clickableDiv clickableDivOff">Filter is off</div>

        <p></p>

        <table id="dataTable" border =1 cellspacing="1" cellpadding="1" style="width:100%">
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Marks</th>
            </tr>
            <tr>
                <td>22</td>
                <td>Smith</td>      
                <td>50</td>
            </tr>
            <tr>
                <td>23</td>
                <td>Jackson</td>        
                <td>94</td>
            </tr>
            <tr>
                <td>45</td>
                <td>Doe</td>        
                <td>80</td>
            </tr>
            <tr>
                <td>24</td>
                <td>Doe</td>        
                <td>80</td>
            </tr>
            <tr>
                <td>25</td>
                <td>Doe</td>        
                <td>80</td>
            </tr>
            <tr>
                <td>29</td>
                <td>Doe</td>        
                <td>80</td>
            </tr>
        </table>

    </body>
</html>

【讨论】：

谢谢，但显示我的按钮过滤所有内容，它应该根据此处的数组 ID 过滤 (22, 23, 24)。
如果您在打开过滤器之前选中复选框 22,23,24，那么它们只会出现这 3 条记录
感谢您的及时回复！我不想使用我刚刚粘贴的复选框来显示我之前的工作示例。我只需要基于数组进行过滤。
我已修改代码以使用过滤器 id 数组
让我们continue this discussion in chat。