jquery hide() не работает после загрузки страниц

Question

Я думаю, что здесь отсутствует что-то простое и очевидное - я работаю над сайтом, где мне нужно фильтровать категории портфолио, а также показывать описание категории по ссылке, но не для элемента списка «Все».

Страница загружается отлично, а затем я могу щелкнуть и отфильтровать категории/описания в порядке, но затем, если вы нажмете на «Все», описание категории для того, что было в последний раз нажато, остается даже при том, что оно должно скрываться.

Вот DEV сайт (Wordpress) - http://foothilltile.com/dev/products/

Вот соответствующий код:

<ul class="filter-nav"> 
    <li> 
    <h4><?php _e("Filter:", "elemis"); ?></h4> 
    </li> 
    <li class="selected-1 all"><a href="#" data-value="all"> 
    <h4><?php _e("All", "elemis"); ?></h4> 
    </a></li> 
    <?php 
     $categories= get_categories('taxonomy=kind&orderby=id'); 
     foreach ($categories as $cat) { 
     $input = '<li><a href="#" data-value="'.$cat->category_nicename.'" class="'.$cat->category_nicename.'"><h4>'; 
     $input .= $cat->cat_name; 
     $input .= '</h4></a></li>'; 
     echo $input; 
     } 
    ?> 
</ul> 
<div class="clear"></div> 
<!-- End Portfolio Navigation --> 

<div id="category-descriptions"> 

    <ul class="descriptions-list"> 
     <li class="all"></li> 
     <?php 
      $categories= get_categories('taxonomy=kind&orderby=id'); 
      foreach ($categories as $cat) { 
      $input = '<li class="cat-desc '.$cat->category_nicename.'">'; 
      $input .= $cat->description; 
      $input .= '</li>'; 
      echo $input; 
      } 
     ?> 

    </ul> 
</div> <!--/category-descriptions -->` 

И тогда ЯШИ:

jQuery(document).ready(function($) { 
    $('.filter-nav li a').click(function() { 
    // fetch the class of the clicked item 
    var ourClass = $(this).attr('class'); 

    if (ourClass == 'all') { 
     // this should hide the li's on load - but doesn't? 
     $('.descriptions-list').children('li.cat-desc').hide(); 
    } 
    else { 

     // hide all elements that don't share ourClass 
     $('.descriptions-list').children('li:not(.' + ourClass + ')').hide(); 
     // show all elements that do share ourClass 
     $('.descriptions-list').children('li.' + ourClass).show(); 
    } 
    return false; 
    }); 
}); 

И единственный значимый CSS является li.cat-desc установлен для отображения: none.

Любые предложения будут оценены. Я всегда смущаю порядок кода в jQuery (нуб, конечно), поэтому заблаговременно за вашу помощь.

Answer 1

Якорь для «Все» не имеет класса «все» ... это проблема. Класса устанавливается в Li-элемент ... Добавить класс а-элемент, и она должна быть работа

Answer 2

событие щелчка назначается на якорь тег a так $(this).attr('class'); будет ссылаться на атрибут якорный класса тега , так что вместо этого вы должны скорее попробовать этот

var ourClass =$(this).parent("li").attr('class');

или может быть только

var ourClass =$(this).parent().attr('class');