'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.

Консоль 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();
        }


    });


});

Любая помощь высоко ценится.

Пит

Answer 1

Вам нужно обернуть filter0 в if (CheckWhichClassSelected === filter0) { внутри кавычек:

if (CheckWhichClassSelected === "filter0") {

рабочий пример: http://jsfiddle.net/niklasvh/WmP3P/

Answer 2

Я думаю, что вы пропустили две вершины здесь:

   if (CheckWhichClassSelected === filter0) {

это должно быть:

  if (CheckWhichClassSelected === 'filter0') {

Теперь все работает нормально:

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