Question

我一直在敲打我的头脑并绞尽脑汁。我在淡入淡出时使用jQuery hide（），show（），并且所有内容似乎都可以正常用于排序/过滤。然而，当我从下拉列表中选择隐藏时，最后一个div（容器）（Warranties）随机地不断弹回。我有一个函数检查一个类，看看它是否附加 - titleShow。我已经完成了一切，使用了我的console.log，即使它没有类，“titleShow”它仍然会弹出。不知道我错过了什么，但想要一双新眼睛来帮助我找到问题的根本原因。提前致谢！希望这是一个小问题，而不是一个错误！

Page：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

我认为这只是关于保修类别。

我认为您应首先对页面进行编码，以便在页面加载时不显示任何项目。如果不可能，那么您应该显示所有项目。

然后我想说，你需要两个不同的功能来对产品进行排序并对类别进行排序。

这样，如果用户选择了一个类别和/或一个产品，它就会起作用。

此外，您可以使用jQuery的切换功能来显示/隐藏项目。代码会更清晰。

尽量简化。

jQuery hide（）随机显示Last Div

1 个答案: