Javascript回调和模式匹配帮助

我想做一个简单的搜索器/荧光笔，我遇到了不一致的结果/当我测试它时没有发生任何问题。Javascript回调和模式匹配帮助

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

理想情况下，当一个人点击标签时，一切都应该淡出，只有与他们匹配的标签潜水应该重新出现。如果没有任何匹配，那么没有发现div应该出现，并且重置应该会很快消失，并使所有div（sans nomatch div）重新出现。

任何人都可以提供一些我可以改进的地方的说明？

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

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

随机找不到结果。

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

来源

2011-04-25 Hyposaurus

你能提供一个小提琴吗？ – Andre 2011-04-25 13:18:15

如果你能描述出了什么问题（如果有的话），以及报告了哪些错误，这肯定会有很大的帮助。 – Pointy 2011-04-25 13:26:52

[这是你的东西作为jsfiddle]（http://jsfiddle.net/xtunh/）。我无法弄清楚它是什么或不该做什么;它目前肯定是*东西*。 – Pointy 2011-04-25 13:35:23

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

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

让我知道你是否需要关于JavaScript的更多解释。

来源

2011-05-01 21:27:09 andyb

看起来工作很好，给了我更多的消化。非常欢呼。 – Hyposaurus 2011-05-02 12:31:46

你需要复制你的下面的代码

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数组以显示搜索结果。那时它甚至还没有搜索过这些参赛作品。

这只是因为我们主要用于顺序代码，所以回调需要一点点头。但它的确如此。您只需继续将代码放入回调中，然后再放入另一个回调中等等。

来源

2011-04-25 13:38:23 neebz

我已经加入了你的修复，但它并没有完全解决我的问题。 – Hyposaurus 2011-04-25 14:28:15

你现在得到什么问题？ – neebz 2011-04-25 14:37:28

我已经更新了我原来的帖子，里面有关于现在正在破碎的内容。 – Hyposaurus 2011-04-27 04:17:08

Javascript回调和模式匹配帮助

回答

相关问题