Question

我正在研究一个jQuery悬停代码片段，它将在悬停时添加标记，然后使用该类。这是JS。

$('.port-item').hover(function(){
        var $this = $(this);
        var name = $($this.find("img")).attr('title');
        $this.append('<div class="port-item-cover"><h3>' + name + '</h3><div>');
        $($this.children(".port-item-cover")).fadeIn();
    }, function(){
        $($(this).children(".port-item-cover")).fadeOut();
});

HTML标记非常简单：

<div class="port-item">
   <a href="/portfolio/#/<?=$p['shortname']?>">
      <img src="images/portfolio/p_<?=$p['shortname']?>0.jpg" title="<?=$p['title']?>">
   </a>
</div>

两个问题：主要的一个问题是，如何避免jquery $($(this).children("#element"))中的双重查找以查找当前范围内的子元素？在第二个函数中它非常丑陋，有更好的方法吗？

第二个问题是检查之前是否曾经存在以及是否存在标记的最佳方法是什么，所以我不会在随后的悬停中添加它。

Answer 1

所有jQuery遍历方法都已返回jQuery对象;你永远不需要写$($this.children())。
没有

一个。如果没有鼠标中心，Mouseleave就不应该开火。

湾如果没有任何匹配元素，则不会发生任何事情;你不会得到错误。

但是，您需要在动画结束后删除元素;现在，你在每个悬停上添加一个单独的元素。

请注意，您将mouseenter简化为

$('<div class="port-item-cover"><h3>' + name + '</h3><div>')
    .appendTo(this)
    .fadeIn();

Answer 2

第一个很容易。您不需要外部$电话。 .find()已经返回一个jQuery对象。就这样写吧

$(this).children("#element")

至于检测它是否曾在此前悬停，你必须在某处设置一个标志。这可能是这样的：

var hoveredOver = false;
$('.port-item').hover(function(){
    hoveredOver = true;
    //continue event handler
}

根据您的具体情况，您可能需要对此感到满意。也许如果你徘徊在很多事情上，使用.data()设置标志会更好。

$('.port-item').hover(function(){
    $(this).data('hoveredOver', true);
    //continue event handler
}

编辑错过了一个问题。第三个答案：判断DOM对象（标记）是否在那里你已经搜索过它并检查长度如下：

if($(this).find('#port-item-cover').length>0)
{
    //element exists
}
else
{
    //element does not exist, add it
}

Answer 3

对于第一个问题，请改用：

$(this).children("#element")

如何避免双jQuery对象查找

3 个答案: