jQuery的 - 当父DIV类被多次使用时，在悬停时显示DIV

不知道如何解决这个问题 - 我使用jQuery来显示另一个div时，div展开div，但是我使用相同的div类多个次在页面上。jQuery的 - 当父DIV类被多次使用时，在悬停时显示DIV

这里是我的代码：

$(".map-item, .map-item-trail").live("mouseenter", function() { 
$(".mapitem-smalldescription").fadeIn("normal", function() { 
    }); 
});

“地图项”和“地图项-TRAIL”被多次使用，所以当你将鼠标悬停在一个，是类显示上的所有弹出DIV其中。我该如何修改代码，使弹出窗口只出现在悬停的项目上。

感谢扎克

来源

2011-03-13 Zach Nicodemous

是否有一个两者之间的一对一关系？ – 2011-03-13 17:09:52

您有使用实时方法的原因吗？ – Trevor 2011-03-13 17:12:10

@Trevor这并非不合理，例如，如果动态添加HTML。 – 2011-03-13 17:18:40

只有淡入元素s可以在正在悬停的元素中找到。

$(".map-item, .map-item-trail").live("mouseenter", function() { 
    $(this).find(".mapitem-smalldescription").fadeIn("normal", function() { 
    }); 
});

来源

2011-03-13 17:16:04

谢谢。那很完美。 – 2011-03-13 17:25:06

-1

您可以定义每个项目对相同的id和做类似：

$(".map-item, .map-item-trail").live("mouseenter", function() { 
$(".mapitem-smalldescription[mapitem="+this.id+"]").fadeIn("normal", function() { 
    }); 
}); 

<div class="map-item" id="1"></div> 
<div class="map-item" id="2"></div> 
<div class="mapitem-smalldescription" mapitem="1"></div> 
<div class="mapitem-smalldescription" mapitem="2"></div>

另一个解决方法是把你的smalldescription的div只是它的div元素后并使用next（）：

$(".map-item, .map-item-trail").live("mouseenter", function() { 
$(this).next().fadeIn("normal", function() { 
    }); 
});

来源

2011-03-13 17:12:08

不，你不能。文档中的'id'必须是* unique *，否则它是无效的标记并引入不一致。值得注意的是，HTML5 doctype文档之外的'id'也是无效的。 – 2011-03-13 17:13:21

好吧，然后用自定义属性... – 2011-03-13 17:17:06

@David一个ID在HTML5文档之外是无效的？你的意思是一个数字ID，对吧？ – nyuszika7h 2011-03-13 18:45:22

没有看到你的HTML标记，而这是很难具体建议，但假设第三.mapitem-smalldescription涉及的第三.map-item或.map-item-trail，这应该工作：

$(".map-item, .map-item-trail").live("mouseenter", function() { 
    var itemIndex = $(this).index(); 
    $(".mapitem-smalldescription:eq(" + itemIndex + ")").fadeIn("normal", function() { 
    }); 
});

来源

2011-03-13 17:16:04

jQuery的 - 当父DIV类被多次使用时，在悬停时显示DIV

回答

相关问题