1

这是应该发生的事情。
1. 获取点击链接的 rel 属性
2. 对于每一个 'entry' 类的 div：
(i) 获取它的 'left' 位置
(ii) 计算它的外部高度
(iii) 循环遍历 'a.tag_filter' 的所有实例. 如果它在“rel”中找到与最初单击的字符串相同的字符串，则将 1 添加到“V”并跳出循环。
(iv)如果在循环之后'V'等于0，我们知道在那个'.entry'中不存在相同的标签，所以淡出它。
(v)一旦淡出完成，在淡出之后循环遍历所有的“.entry”并获取它们的“左”值。
(vi)如果褪色条目的左值=当前'.entry'的左值

目前正在发生的事情。
它贯穿并淡出所有正确的“.entry”元素，只有在所有元素都淡出之后，它才会重新定位剩余的“.entry”元素。

在每个元素淡出之后，我希望重新定位循环运行，因此它基本上一次定位剩余元素，而不是一次定位所有元素。

这是我的代码编辑：

$('a.tag_filter').click(function(e){
        e.preventDefault();
        var selectTag = $(this).attr('rel');

    $('div.spotlight_entry_container_grid').each(function(i){
        var $entry = $(this);
        var tagArray = [];

        $('a.tag_filter', this).each(function(){
            tagArray.push ($(this).attr('rel'));
        }); 

        if($.inArray(selectTag,tagArray) == -1){
            var leftPos = $entry.css("left"); 
                    var topPos = $entry.css("top"); 

            $entry.fadeOut(1000, function(){
                var nextLeftPos;
                            var nextTopPos;

                $('div.spotlight_entry_container_grid:gt('+i+')').each(function(j) {   
                    var $laterEntry = $(this); 
                    nextLeftPos = $laterEntry.css("left");
                                nextTopPos = $laterEntry.css("top");
                    //we need to keep the entries in their columns.
                    //matching left values will do it. No need to animate left values.
                    if(leftPos == nextLeftPos){
                        $laterEntry.animate({ top: topPos});
                    }
                    }); 
            });
        }   
    });
    });

希望这是有道理的
任何帮助将不胜感激！我可能正在做一些疯狂的事情，但我无法发现它。谢谢

4

2 回答 2

3

在这里

$('a.tag_filter', this).each(function(){
                        var curTag = $(this).attr('rel');
                        if(curTag == selectTag){
                                v++;
                                return false;
                        }
                });

在 of 内返回 false$().each()会中断对包装集中每个元素的循环。

从文档

从每个函数中返回 'false' 会完全停止遍历所有元素的循环（这就像在正常循环中使用 'break'）。从循环中返回“真”会跳到下一次迭代（这就像在正常循环中使用“继续”）。

另外，我建议$(this)在每个变量内部缓存each()一个局部变量以提高性能，而不是多次引用它。

编辑：

进一步查看代码后，我认为以下应该这样做

$('a.tag_filter').click(function(e){

        // prevent the default anchor behaviour
        e.preventDefault();
        var selectTag = $(this).attr('rel');

        $('div.entry').each(function(i){
                var $entry = $(this);                  

                // get an array of the anchor tag rel attributes
                var tagArray = [];
                $('a.tag_filter', this).each(function() {
                        tagArray.push ($(this).attr('rel'));
                });

                // if we can't find the selected tag in the entries tags
                if ($.inArray(selectTag,tagArray) == -1) {        
                    var leftPos = $entry.css("left"); 
                    var topPos = $entry.css("top");                      

                    $entry.fadeOut(1000, function(){
                        var nextLeftPos;
                        var nextTopPos;

                        $('div.entry:gt('+i+')').each(function(j) {             
                            var $laterEntry = $(this); 
                            nextLeftPos = $laterEntry.css("left");
                            nextTopPos = $laterEntry.css("top");
                            // for the first element, set top and left to the faded out element values
                            if (j == 0) {                               
                                $laterEntry.animate({ top: topPos, left: leftPos });
                            }
                            // for later elements in the loop, ste the values to the previous element values
                            else {
                                $laterEntry.animate({ top: nextTopPos, left: nextLeftPos  });
                            }
                        });
                    });                                                                  
                }
         });  



 });
于 2009-08-20T10:55:49.267 回答
0

您不需要缓存 $(this)，jQuery 自动缓存 this 选择器以用于函数回调。

于 2010-07-21T20:59:39.997 回答