'ul >li'像下拉列表+按类过滤

Question

我写了一个小函数（实际上是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();
        }

    });

});

非常感谢您的帮助

Pete

Answer 1

我想你错过了两个顶点：

   if (CheckWhichClassSelected === filter0) {

应该是：

  if (CheckWhichClassSelected === 'filter0') {

现在它似乎工作正常：

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

Answer 2

您需要将filter0封装在if (CheckWhichClassSelected === filter0) {中的引号中：

if (CheckWhichClassSelected === "filter0") {

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