jQuery hide（）無作為に最後の部門を表示

Question

私は頭を叩いて、私の脳をぶら下げています。私はフェードでjQuery hide（）、show（）を使用しています。すべてがソート/フィルタリングのために正しく動作するようです。しかし、最後のdiv（コンテナ）（Warranties）は、私がドロップダウンから隠しているはずの選択をしているときに、ランダムにポップアップしていきます。私はクラスがあるかどうかをチェックする関数を持っています。私はすべてを追跡し、console.logを使用し、クラスがない場合でも "titleShow"はポップアップします。私が紛失しているものはわかりませんが、私の問題の根本的な原因を見つけるのに役立つ新しい目のペアが必要です。前もって感謝します！うまくいけば、それはバグではなくマイナーなものです！

ページ：http://www.collegepark.bfmdev1.com/practitioners/literature

はJavaScript

var titlesToShow = []; 
    var wordsSelected = []; 


    /* drop down functions for basic filtering */ 
    jQuery("#foot-filter").change(function() { 
     sortPDFs($(this).val()); 
    }) 

    jQuery("#category-filter").change(function() { 
     sortPDFs($(this).val()); 
    }); 

    /* checking each list item for the word selected */ 
    function sortPDFs(wordSelected) { 

     titlesToShow = []; 

     wordsSelected.push(wordSelected); 

     if(wordsSelected.length>2) { 
      wordsSelected.shift(); 
     }; 

     $(".lit-pdfs li").each(function() { 

      var $li = $(this); 

      if($li.hasClass('displayItem')) { 
       $li.removeClass('displayItem'); 
      } 
      for(var i=0; i<wordsSelected.length; i++) { 
       if ($li.data("document-type").indexOf(wordsSelected[i]) > -1) { 
        $li.addClass('displayItem'); 
        $li.fadeIn(300, function(){ 
         $li.show(); 
        }); 
        checkForTitle($li.parent().parent().parent().parent().attr('id')); 
       } else { 
        if(!$li.hasClass('displayItem')) { 
         $li.fadeOut(300, function(){ 
          $li.hide(); 
         }); 
        } 

       } 
      }; 
     }); 

     showHideContainers(titlesToShow); 
    }; 
    /* adds the id of the .lit-container to be added to ensure it shows */ 
    function checkForTitle(addTitle) { 

     if(titlesToShow.length==0) { 
      titlesToShow.push(addTitle); 
     } else { 
      var found = titlesToShow.indexOf(addTitle); 

      if(found == -1) { 
       titlesToShow.push(addTitle); 
      }; 
     }; 
    }; 
    /* hides and shows the proper title bars (pdf containers) */ 
    function showHideContainers(titlesToShow) { 
     $(".lit-container").each(function() { 

      $pdfContainer = $(this); 
      $pdfContainer.removeClass('titleShow'); 

      for(var i = 0; i<titlesToShow.length; i++) { 
       if($pdfContainer.attr('id') == titlesToShow[i]) { 
        $pdfContainer.fadeIn(300, function(){ 
         $pdfContainer.show(); 
        }); 
        $pdfContainer.addClass('titleShow'); 
       } 
      }; 
      if(!$pdfContainer.hasClass('titleShow')) { 
       $pdfContainer.fadeOut(300, function(){ 
        $pdfContainer.hide(); 
       }); 
      }; 
     }); 
    }; 

Answer 1

私はそれが唯一の保証カテゴリについてではないと思います。

ページロード時にアイテムが表示されないように、最初にページをコーディングする必要があります。それが不可能な場合は、すべてのアイテムを表示する必要があります。

次に、商品の並べ替えとカテゴリの並べ替えには2つの異なる機能が必要です。

このように、ユーザーがカテゴリおよび/または製品を選択すると、それは機能します。

また、jQueryのトグル機能を使用して項目を表示/非表示にすることもできます。コードはより明確になります。

簡単にしてください。