为什么我使用jQuery filter()不起作用

时间:2013-01-24 08:06:17

标签: javascript jquery

我需要按日期,类型和场地排序一些事件。单击日历中的复选框或日期时,我只想显示该日期的事件和那些复选框。例如,如果我从日历选择 21 ,从类型复选框选择古典,从场地复选框选择 Lucas影院,I希望它只向我展示21世纪在卢卡斯的经典事件。我希望它隐藏其他一切。

但是,我的filter()只显示所选内容似乎不起作用。我对filter()的概念或我对它的使用是错误的,还是其他问题?

这是我的jQuery:

$(function(){

    $('input').attr('checked', false);

    $('label.check').click(function(){
            if( $(this).find('input').is(':checked') ){
                $(this).find('input').attr('checked', false);
                $(this).removeClass('checked');
            } else {
                $(this).find('input').attr('checked', true);
                $(this).addClass('checked');
            }

            $(this).find('input').trigger('change');

            return false;
        });

    $('label.check, .calendar a').click(function(){
        $(this).toggleClass('active');
        filtering();
        return false;
    });

    function filtering(){
        var values = {}
        $('.search-options').each(function(){

            var attr_name = $(this).attr('name');
            var check_value = $(this).find('input:checked');
            var date_text = $(this).find('.calendar a.active');

            values[attr_name] = [];

            check_value.each(function(){
                values[attr_name].push('' + attr_name + '="' + $(this).val() + '"');
            });

            date_text.each(function(){
                values[attr_name].push('' + attr_name + '="' + $(this).text() + '"');
            });
        })

        for ( var i in values ){

            var joined = values[i].join()
            var match = $('.widget.left').filter(joined);
            match.show()
            console.log( match );
        };
    };
});

这是我的HTML:

   <div class="dd">
       <div class="concerts check-group">
           <form action="" method="post">
               <div class="search-options left" name="date">
                    <h3>Select Dates</h3>
                    <div class="calendar-title">
                        <h4>March &amp; April 2013</h4>
                    </div>
                    <div class="calendar">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <th>s</th>
                                <th>m</th>
                                <th>t</th>
                                <th>w</th>
                                <th>t</th>
                                <th>f</th>
                                <th>s</th>
                            </tr>
                            <tr>
                                <td class="disabled">17</td>
                                <td class="disabled">18</td>
                                <td class="disabled">19</td>
                                <td class="disabled">20</td>
                                <td><a href="#">21</a></td>
                                <td><a href="#">22</a></td>
                                <td><a href="#">23</a></td>
                            </tr>
                            <tr>
                                <td><a href="#">24</a></td>
                                <td><a href="#">25</a></td>
                                <td><a href="#">26</a></td>
                                <td><a href="#">27</a></td>
                                <td><a href="#">28</a></td>
                                <td><a href="#">29</a></td>
                                <td><a href="#">30</a></td>
                            </tr>
                            <tr>
                                <td><a href="#">31</a></td>
                                <td><a href="#">1</a></td>
                                <td><a href="#">2</a></td>
                                <td><a href="#">3</a></td>
                                <td><a href="#">4</a></td>
                                <td><a href="#">5</a></td>
                                <td><a href="#">6</a></td>
                            </tr>
                        </table>
                    </div>
                </div>

                <div class="search-options left" name="genre">
                    <h3>genre</h3>
                    <div class="labels genre-vals">
                        <label class="check">
                            <span></span>
                            <input type="checkbox" class="checkfield all-check" value="all" checked="checked" />
                            All genres
                        </label>
                        <label class="check">
                            <span></span>
                            <input type="checkbox" class="checkfield" value="jazz-and-blues" checked="checked" />
                            jazz &amp; Blues
                        </label>
                        <label class="check">
                            <span></span>
                            <input type="checkbox" class="checkfield" value="classical" checked="checked" />
                            Classical
                        </label>
                        <label class="check">
                            <span></span>
                            <input type="checkbox" class="checkfield" value="americana" checked="checked" />
                            Americana
                        </label>
                        <label class="check">
                            <span></span>
                            <input type="checkbox" class="checkfield" value="world-music" checked="checked" />
                            World Music
                        </label>
                    </div>
                </div>

                <div class="search-options wide right venue-vals" name="venue">
                    <h3>venues</h3>
                    <div class="col">
                        <div class="labels">
                            <label class="check">
                                <span></span>
                                <input type="checkbox" class="checkfield all-check" value="all" checked="checked" />
                                All venues
                            </label>
                            <label class="check">
                                <span></span>
                                <input type="checkbox" class="checkfield" value="telfair" checked="checked" />
                                Telfair Academy of Arts &amp; Science
                            </label>
                            <label class="check">
                                <span></span>
                                <input type="checkbox" class="checkfield" value="lucas" checked="checked" />
                                Lucas Theatre for the Arts
                            </label>
                            <label class="check">
                                <span></span>
                                <input type="checkbox" class="checkfield" value="trustees" checked="checked" />
                                Trustees Theater
                            </label>
                        </div>
                    </div>

                    <div class="col">
                        <div class="labels">
                            <label class="check">
                                <span></span>
                                <input type="checkbox" class="checkfield" value="charles" checked="checked" />
                                Charles H. Morris Center
                            </label>
                            <label class="check">
                                <span></span>
                                <input type="checkbox" class="checkfield" value="trinity" checked="checked" />
                                Trinity United Methodist Church
                            </label>
                            <label class="check">
                                <span></span>
                                <input type="checkbox" class="checkfield" value="ships" checked="checked" />
                                Ships of the Sea North Garden
                            </label>
                        </div>
                    </div>
                    <div class="cl">&nbsp;</div>
                </div>
                <div class="cl">&nbsp;</div>
            </form>
        </div>


    </div>
    <!-- end dropdown -->

    <!-- widgets -->
    <div class="events result-list">
        <div class="widget left" date="22" genre="classical" venue="telfair">
            <a href="#">
                <span class="date">THUR 3/21</span>
                <img src="css/images/photo05.jpg" alt="" id="image1" />
            </a>
            <div class="widget-cnt">
                <h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
                <p>12:30 pm | Charles H. Morris Center</p>
                <p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
                <div class="widget-links">
                    <a href="#">read more</a>
                    <a href="#">buy tickets</a>
                </div>
            </div>
        </div>

        <div class="widget left" date="22" genre="jazz-and-blues" venue="lucas">
            <a href="#">
                <span class="date">THUR 3/21</span>
                <img src="css/images/photo05.jpg" alt="" id="image1" />
            </a>
            <div class="widget-cnt">
                <h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
                <p>12:30 pm | Charles H. Morris Center</p>
                <p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
                <div class="widget-links">
                    <a href="#">read more</a>
                    <a href="#">buy tickets</a>
                </div>
            </div>
        </div>

        <div class="widget left" date="22" genre="americana" venue="charles">
            <a href="#">
                <span class="date">THUR 3/21</span>
                <img src="css/images/photo05.jpg" alt="" id="image1" />
            </a>
            <div class="widget-cnt">
                <h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
                <p>12:30 pm | Charles H. Morris Center</p>
                <p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
                <div class="widget-links">
                    <a href="#">read more</a>
                    <a href="#">buy tickets</a>
                </div>
            </div>
        </div>

        <div class="widget left" date="23" genre="world-music" venue="telfair">
            <a href="#">
                <span class="date">THUR 3/21</span>
                <img src="css/images/photo05.jpg" alt="" id="image1" />
            </a>
            <div class="widget-cnt">
                <h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
                <p>12:30 pm | Charles H. Morris Center</p>
                <p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
                <div class="widget-links">
                    <a href="#">read more</a>
                    <a href="#">buy tickets</a>
                </div>
            </div>
        </div>


        <div class="widget left" date="23" genre="classical" venue="trustees">
            <a href="#">
                <span class="date">THUR 3/21</span>
                <img src="css/images/photo05.jpg" alt="" id="image1" />
            </a>
            <div class="widget-cnt">
                <h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
                <p>12:30 pm | Charles H. Morris Center</p>
                <p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
                <div class="widget-links">
                    <a href="#">read more</a>
                    <a href="#">buy tickets</a>
                </div>
            </div>
        </div>

        <div class="widget left" date="24" genre="americana" venue="ships">
            <a href="#">
                <span class="date">THUR 3/21</span>
                <img src="css/images/photo05.jpg" alt="" id="image1" />
            </a>
            <div class="widget-cnt">
                <h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
                <p>12:30 pm | Charles H. Morris Center</p>
                <p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
                <div class="widget-links">
                    <a href="#">read more</a>
                    <a href="#">buy tickets</a>
                </div>
            </div>
        </div>

        <div class="widget left" date="24" genre="classical" venue="lucas">
            <a href="#">
                <span class="date">THUR 3/21</span>
                <img src="css/images/photo05.jpg" alt="" id="image1" />
            </a>
            <div class="widget-cnt">
                <h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
                <p>12:30 pm | Charles H. Morris Center</p>
                <p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
                <div class="widget-links">
                    <a href="#">read more</a>
                    <a href="#">buy tickets</a>
                </div>
            </div>
        </div>

        <div class="widget left" date="25" genre="jazz-and-blues" venue="trinity">
            <a href="#">
                <span class="date">THUR 3/21</span>
                <img src="css/images/photo05.jpg" alt="" id="image1" />
            </a>
            <div class="widget-cnt">
                <h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
                <p>12:30 pm | Charles H. Morris Center</p>
                <p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
                <div class="widget-links">
                    <a href="#">read more</a>
                    <a href="#">buy tickets</a>
                </div>
            </div>
        </div>


        <div class="widget left" date="26" genre="jazz-and-blues" venue="charles">
            <a href="#">
                <span class="date">THUR 3/21</span>
                <img src="css/images/photo05.jpg" alt="" id="image1" />
            </a>
            <div class="widget-cnt">
                <h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
                <p>12:30 pm | Charles H. Morris Center</p>
                <p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
                <div class="widget-links">
                    <a href="#">read more</a>
                    <a href="#">buy tickets</a>
                </div>
            </div>
        </div>

        <div class="widget left" date="26" genre="classical" venue="telfair">
            <a href="#">
                <span class="date">THUR 3/21</span>
                <img src="css/images/photo05.jpg" alt="" id="image1" />
            </a>
            <div class="widget-cnt">
                <h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
                <p>12:30 pm | Charles H. Morris Center</p>
                <p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
                <div class="widget-links">
                    <a href="#">read more</a>
                    <a href="#">buy tickets</a>
                </div>
            </div>
        </div>

        <div class="widget left" date="26" genre="world-music" venue="charles">
            <a href="#">
                <span class="date">THUR 3/21</span>
                <img src="css/images/photo05.jpg" alt="" id="image1" />
            </a>
            <div class="widget-cnt">
                <h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
                <p>12:30 pm | Charles H. Morris Center</p>
                <p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
                <div class="widget-links">
                    <a href="#">read more</a>
                    <a href="#">buy tickets</a>
                </div>
            </div>
        </div>

        <div class="widget left" date="27" genre="americana" venue="trinity">
            <a href="#">
                <span class="date">THUR 3/21</span>
                <img src="css/images/photo05.jpg" alt="" id="image1" />
            </a>
            <div class="widget-cnt">
                <h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
                <p>12:30 pm | Charles H. Morris Center</p>
                <p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
                <div class="widget-links">
                    <a href="#">read more</a>
                    <a href="#">buy tickets</a>
                </div>
            </div>
        </div>


        <div class="widget left" date="27" genre="classical" venue="lucas">
            <a href="#">
                <span class="date">THUR 3/21</span>
                <img src="css/images/photo05.jpg" alt="" id="image1" />
            </a>
            <div class="widget-cnt">
                <h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
                <p>12:30 pm | Charles H. Morris Center</p>
                <p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
                <div class="widget-links">
                    <a href="#">read more</a>
                    <a href="#">buy tickets</a>
                </div>
            </div>
        </div>

        <div class="widget left" date="28" genre="jazz-and-blues" venue="ships">
            <a href="#">
                <span class="date">THUR 3/21</span>
                <img src="css/images/photo05.jpg" alt="" id="image1" />
            </a>
            <div class="widget-cnt">
                <h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
                <p>12:30 pm | Charles H. Morris Center</p>
                <p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
                <div class="widget-links">
                    <a href="#">read more</a>
                    <a href="#">buy tickets</a>
                </div>
            </div>
        </div>

        <div class="widget left" date="28" genre="classical" venue="ships">
            <a href="#">
                <span class="date">THUR 3/21</span>
                <img src="css/images/photo05.jpg" alt="" id="image1" />
            </a>
            <div class="widget-cnt">
                <h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
                <p>12:30 pm | Charles H. Morris Center</p>
                <p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
                <div class="widget-links">
                    <a href="#">read more</a>
                    <a href="#">buy tickets</a>
                </div>
            </div>
        </div>

        <div class="widget left" date="29" genre="world-music" venue="telfair">
            <a href="#">
                <span class="date">THUR 3/21</span>
                <img src="css/images/photo05.jpg" alt="" id="image1" />
            </a>
            <div class="widget-cnt">
                <h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
                <p>12:30 pm | Charles H. Morris Center</p>
                <p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
                <div class="widget-links">
                    <a href="#">read more</a>
                    <a href="#">buy tickets</a>
                </div>
            </div>
        </div>


        <div class="widget left" date="29" genre="americana" venue="trustees">
            <a href="#">
                <span class="date">THUR 3/21</span>
                <img src="css/images/photo05.jpg" alt="" id="image1" />
            </a>
            <div class="widget-cnt">
                <h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
                <p>12:30 pm | Charles H. Morris Center</p>
                <p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
                <div class="widget-links">
                    <a href="#">read more</a>
                    <a href="#">buy tickets</a>
                </div>
            </div>
        </div>

        <div class="widget left" date="30" genre="classical" venue="trustees">
            <a href="#">
                <span class="date">THUR 3/21</span>
                <img src="css/images/photo05.jpg" alt="" id="image1" />
            </a>
            <div class="widget-cnt">
                <h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
                <p>12:30 pm | Charles H. Morris Center</p>
                <p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
                <div class="widget-links">
                    <a href="#">read more</a>
                    <a href="#">buy tickets</a>
                </div>
            </div>
        </div>

        <div class="widget left" date="30" genre="world-music" venue="charles">
            <a href="#">
                <span class="date">THUR 3/21</span>
                <img src="css/images/photo05.jpg" alt="" id="image1" />
            </a>
            <div class="widget-cnt">
                <h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
                <p>12:30 pm | Charles H. Morris Center</p>
                <p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
                <div class="widget-links">
                    <a href="#">read more</a>
                    <a href="#">buy tickets</a>
                </div>
            </div>
        </div>

        <div class="widget left" date="31" genre="jazz-and-blues" venue="lucas">
            <a href="#">
                <span class="date">THUR 3/21</span>
                <img src="css/images/photo05.jpg" alt="" id="image1" />
            </a>
            <div class="widget-cnt">
                <h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
                <p>12:30 pm | Charles H. Morris Center</p>
                <p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
                <div class="widget-links">
                    <a href="#">read more</a>
                    <a href="#">buy tickets</a>
                </div>
            </div>
        </div>


        <div class="widget left" date="31" genre="world-music" venue="trustees">
            <a href="#">
                <span class="date">THUR 3/21</span>
                <img src="css/images/photo05.jpg" alt="" id="image1" />
            </a>
            <div class="widget-cnt">
                <h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
                <p>12:30 pm | Charles H. Morris Center</p>
                <p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
                <div class="widget-links">
                    <a href="#">read more</a>
                    <a href="#">buy tickets</a>
                </div>
            </div>
        </div>

        <div class="widget left" date="1" genre="classical" venue="ships">
            <a href="#">
                <span class="date">THUR 3/21</span>
                <img src="css/images/photo05.jpg" alt="" id="image1" />
            </a>
            <div class="widget-cnt">
                <h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
                <p>12:30 pm | Charles H. Morris Center</p>
                <p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
                <div class="widget-links">
                    <a href="#">read more</a>
                    <a href="#">buy tickets</a>
                </div>
            </div>
        </div>

        <div class="widget left" date="2" genre="classical" venue="lucas">
            <a href="#">
                <span class="date">THUR 3/21</span>
                <img src="css/images/photo05.jpg" alt="" id="image1" />
            </a>
            <div class="widget-cnt">
                <h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
                <p>12:30 pm | Charles H. Morris Center</p>
                <p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
                <div class="widget-links">
                    <a href="#">read more</a>
                    <a href="#">buy tickets</a>
                </div>
            </div>
        </div>

        <div class="widget left" date="2" genre="jazz-and-blues" venue="trinity">
            <a href="#">
                <span class="date">THUR 3/21</span>
                <img src="css/images/photo05.jpg" alt="" id="image1" />
            </a>
            <div class="widget-cnt">
                <h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
                <p>12:30 pm | Charles H. Morris Center</p>
                <p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
                <div class="widget-links">
                    <a href="#">read more</a>
                    <a href="#">buy tickets</a>
                </div>
            </div>
        </div>


        <div class="widget left" date="3" genre="classical" venue="charles">
            <a href="#">
                <span class="date">THUR 3/21</span>
                <img src="css/images/photo05.jpg" alt="" id="image1" />
            </a>
            <div class="widget-cnt">
                <h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
                <p>12:30 pm | Charles H. Morris Center</p>
                <p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
                <div class="widget-links">
                    <a href="#">read more</a>
                    <a href="#">buy tickets</a>
                </div>
            </div>
        </div>

        <div class="widget left" date="4" genre="jazz-and-blues" venue="telfair">
            <a href="#">
                <span class="date">THUR 3/21</span>
                <img src="css/images/photo05.jpg" alt="" id="image1" />
            </a>
            <div class="widget-cnt">
                <h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
                <p>12:30 pm | Charles H. Morris Center</p>
                <p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
                <div class="widget-links">
                    <a href="#">read more</a>
                    <a href="#">buy tickets</a>
                </div>
            </div>
        </div>

        <div class="widget left" date="5" genre="classical" venue="telfair">
            <a href="#">
                <span class="date">THUR 3/21</span>
                <img src="css/images/photo05.jpg" alt="" id="image1" />
            </a>
            <div class="widget-cnt">
                <h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
                <p>12:30 pm | Charles H. Morris Center</p>
                <p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
                <div class="widget-links">
                    <a href="#">read more</a>
                    <a href="#">buy tickets</a>
                </div>
            </div>
        </div>

        <div class="widget left" date="6" genre="americana" venue="ships">
            <a href="#">
                <span class="date">THUR 3/21</span>
                <img src="css/images/photo05.jpg" alt="" id="image1" />
            </a>
            <div class="widget-cnt">
                <h4><a href="#">Noon30: sweet singing harmony harmoneers</a></h4>
                <p>12:30 pm | Charles H. Morris Center</p>
                <p>Carrying forth the tradition of jubilee gospel greats the Fairfield Four and the Golden Gate Quartet,...</p>
                <div class="widget-links">
                    <a href="#">read more</a>
                    <a href="#">buy tickets</a>
                </div>
            </div>
        </div>
</div>

1 个答案:

答案 0 :(得分:1)

我将属性选择器更改为 Bergi 并更改此代码(或过滤):

    widgets.hide();
    for ( var i in values ){
        var joined = values[i].join();
        var match = widgets.filter(joined);
        match.show();
    };

演示:http://jsfiddle.net/tZyWa/

OR(和过滤):

    widgets.hide();
    var match = widgets;
    for ( var i in values ){
        var joined = values[i].join();
        match = match.filter(joined);
    };
    match.show();

演示:http://jsfiddle.net/tZyWa/1/