'ul> li'喜欢下拉+按类过滤

时间:2011-06-27 09:03:44

标签: jquery filter drop-down-menu

我写了小函数(实际上是2)。 首先,ul> li列出了同时自定义下拉列表+过滤器。

它的作用:

- when selected an 'li'
- copy span from inside of it to - > 'a href' (top of the dropdown)
- get class of the span inside 'a href' - which we just copied
- hide all div's which does not have selected class (div's and span's have same classes)

一切正常,直到我在if else条件下添加'all'选项。

Chrome js控制台在最后一步说明未选择的所选类

$('.content div').not('.' + CheckWhichClassSelected).hide();

我做错了什么?

jsfiddle:http://jsfiddle.net/MrTest/hLcML/

HTML

<div class="filter">
    <a class="dropDownSelect" href="#"> -- select -- </a>
    <ul class="dropDownList">
        <li><span class="filter0">All</span></li>
        <li><span class="filter1">Filter 1</span></li>
        <li><span class="filter2">Filter 2</span></li>
        <li><span class="filter3">Filter 3</span></li>
        <li><span class="filter4">Filter 4</span></li>
    </ul>

</div>    
<div class="tab-menu">
</div>

<div class="content">
    <div class="filter1">1</div>
    <div class="filter2">2</div>
    <div class="filter3">3</div>
    <div class="filter4">4</div>
    <div class="filter1">1</div>
    <div class="filter2">2</div>
    <div class="filter3">3</div>
    <div class="filter4">4</div>
</div>

JS:

/*!  OnLoad 
---------------------------------------------*/
$(document).ready(function() {

    $('.dropDownSelect').click(function(event) {
        $(this).next().slideToggle(100);
    });

    $('.dropDownList li').click(function(event) {
        $(this).parent().slideUp(100);
        $('.dropDownSelect').empty();
        $(this).children().clone().appendTo('.dropDownSelect');

        // ShowSelectedClass
        var CheckWhichClassSelected = $('.dropDownSelect').children().attr('class');
        alert(CheckWhichClassSelected);

        $('.content div').show();
        if (CheckWhichClassSelected === filter0) {
            return false;
        }
        else {
            $('.content div').not('.' + CheckWhichClassSelected).hide();
        }


    });


});

非常感谢任何帮助。

皮特

2 个答案:

答案 0 :(得分:2)

我想你错过了两个顶点:

   if (CheckWhichClassSelected === filter0) {

它应该是:

  if (CheckWhichClassSelected === 'filter0') {

现在似乎工作正常:

http://jsfiddle.net/hLcML/8/

答案 1 :(得分:2)

您需要在filter0中将if (CheckWhichClassSelected === filter0) {包裹在引号内:

if (CheckWhichClassSelected === "filter0") {

工作示例: http://jsfiddle.net/niklasvh/WmP3P/