0

ここで単純で明白なものが欠けていると思います.ポートフォリオカテゴリをフィルタリングし、リンククリックでカテゴリの説明を表示する必要があるサイトに取り組んでいますが、「すべて」のリスト項目ではありません。

ページが正常に読み込まれ、カテゴリ/説明をクリックしてフィルタリングできますが、クリックして「すべて」に戻すと、最後にクリックしたカテゴリの説明が非表示になるはずですが、残ります。

開発サイト (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 -->`

そしてjs：

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 が display:none に設定されていることです。

任意の提案をいただければ幸いです。私はいつもjQueryのコードの順序を混乱させています（確かに初心者です）ので、事前に助けてくれてありがとう.

4

2 に答える 2

0

「すべて」のアンカーには「すべて」というクラスがありません...それが問題です。クラスはli要素に設定されています...クラスをa要素に追加すると、機能するはずです

于 2013-07-16T06:14:43.113 に答える