Question

我正在努力制作一个简单的搜索者/荧光笔，当我测试时，我遇到了不一致的结果/没有发生任何事情的困难。

我认为最大的差距是我对回调函数应该如何工作以及选择器能够匹配的内容的理解。

理想情况下，当点击标签时，所有内容都应淡出，只有具有匹配标签的潜水才会重新出现。如果没有任何匹配，那么找不到任何div应该出现，并且重置应该非常淡化并使所有div（sans nomatch div）重新出现不亮。

任何人都对我可以改进的地方做了一些澄清？

编辑：请参阅评论中的链接以查看我的代码。

更多关于问题的澄清：单击标签（旧，摄影，指南），然后单击重置。所有这三个部分都应该重新出现，但只有两个部分会出现。

随机显示未找到的结果。

如果您选择一个标签，然后搜索另一个标签，则淡入淡出和输出将是异步的。

Answer 1

您需要复制以下代码

   if (toFadeIn.length < 1) {      //No results found
        toFadeIn.push(noResults);
    }

    $(toFadeIn).each(function(index, div){
        div.fadeIn(1000);       
    });

在workshop.fadeout的回调函数中..像这样：

workshop.fadeOut(1000, function() {
        var tags = $('.left ul li', this);
        tags.removeClass('searchMatch');      //reset the search results
        tags.each(function() {                
            if ($(this).text().toLowerCase() === searchTerm.toLowerCase()) {
                $(this).addClass('searchMatch');
                toFadeIn.push($(this).parent().parent().parent());
            }
        });

        if (searchTerm === "") {
            toFadeIn.push(workshop);
        }
        if (toFadeIn.length < 1) {      //No results found
            toFadeIn.push(noResults);
        }

        $(toFadeIn).each(function(index, div){
           div.fadeIn(1000);       
         });    


    });

你知道吗？尚未调用淡出回调，但您已经开始浏览toFadeIn数组以显示搜索结果。那时它还没有搜索过这些条目。

这只是因为我们主要习惯于顺序代码，所以回调需要一点点。但它确实像那样工作。你只是继续把代码放在回调中......然后再在另一个回调中等等。

Answer 2

问题在于每个.fadeout()都有.workshopentry，所以真的会有3个淡出。因此，动画完成回调函数也被调用了3次！因此，确定要显示和隐藏哪些新条目的逻辑正在被执行3次并导致奇怪的多次衰落。

我有updated the jsfiddle更强大的解决方案。

如果您需要更多解释JavaScript正在做什么，请告诉我。

Javascript回调和模式匹配帮助

2 个答案: