jQuery hide（）隨機顯示最後一個分區

我一直在砸我的腦袋，甩掉我的大腦。我正在使用jQuery的hide（），show（）淡入淡出，所有對於排序/篩選似乎都能正常工作。然而，當我從下拉菜單中選擇應該隱藏的時候，最後一個分區（容器）（保證）會隨機保持彈出狀態。我有一個函數，檢查一個類，看看它是否附加 - titleShow。我追蹤了一切，使用了我的console.log，即使它沒有這個類，「titleShow」仍然會彈出。不知道我錯過了什麼，但想要一雙新鮮的眼睛幫助我找到問題的根源。提前致謝！希望這是小事而不是錯誤！jQuery hide（）隨機顯示最後一個分區

頁：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(); 
       }); 
      }; 
     }); 
    };

來源

2016-05-25 Kristin Markell

如果您刪除淡入淡出的代碼並立即隱藏/顯示，它是否正常工作？你似乎是添加/刪除一個類，以確定項目是否應該顯示/隱藏，這個添加/刪除不完全符合顯示/隱藏 - 所以你添加類，開始顯示，顯示完成前，刪除類等即比賽條件。使用'：hidden''：動畫'和/或'：visible'而不是控制這個jquery外部。 –

您知道什麼，在對PDF進行排序後，刪除容器上的fadeIn和fadeOut。謝謝您的幫助！它不是「褪色」，如果這甚至是一個字......但它的作品。：）謝謝！。 –

我懷疑可能是這個問題。很難用異步動畫來編寫基於狀態的事件處理程序。 –

我不認爲它只是對擔保類別。

我認爲你應該先對你的頁面進行編碼，這樣在頁面加載時不會顯示任何項目。如果不可能，那麼你應該顯示所有的項目。

然後我會說，你需要兩種不同的功能來排序產品和排序的類別。

這樣，如果用戶選擇一個類別和/或一個產品，它就會工作。

此外，您可以使用jQuery的切換功能來顯示/隱藏項目。代碼會更清晰。

試着讓它變得簡單。

來源

2016-05-25 16:51:55 Mantisse

我不太確定我關注。該功能的工作原理與其最終保修標題除外。它按照它應該隱藏的特定pdf（完美工作）進行排序和過濾，並且如果PDF可見，它會將容器div ID添加到數組中...我在每個li元素上使用數據類型並以這種方式進行過濾。代碼非常清晰直接。我正在使用2個功能。 –

用少數產品和少量類別做一個jsfiddle，除非您已經找到解決方案，否則我會幫助您完成。 – Mantisse

jQuery hide（）隨機顯示最後一個分區

回答

相關問題