Question

我在页面上有ID：

<div id="1"><div id="inner-1" style="display:none;"></div></div>
<div id="2"><div id="inner-2" style="display:none;"></div></div>
<div id="3"><div id="inner-3" style="display:none;"></div></div>

然后，我有js切换悬停父ID的可见性：

var toggleAuthor = function(id) {
    jQuery('#inner-'+id).fadeIn();
};

var toggleAuthorOff = function(id) {
    jQuery('#inner-'+id).delay(1000).fadeOut();
};

所以问题是如何在那里发送悬停id，我想我必须把id转移到var并发送它，就像那样：

var aid = 38;
jQuery(aid).hover(function() {
    toggleAuthor(aid);
}, function() {
    toggleAuthorOff(aid);
});

但是如何只获得徘徊的身份？

提前致谢。

Answer 1

为所有人添加一个类，比如说“tester”：

<div id="container">
    <div id="1" class="tester"><div id="inner-1" style="display:none;"></div></div>
    <div id="2" class="tester"><div id="inner-2" style="display:none;"></div></div>
    <div id="3" class="tester"><div id="inner-3" style="display:none;"></div></div>
</div>

然后使用以下jQuery：

$('#container').on('mouseenter','.tester',function() {
    toggleAuthor(this.id);
}).on('mouseleave','.tester',function(){
    toggleAuthorOff(this.id);
});

这是working jsFiddle

Answer 2

您也可以使用css-classes而不是ID：

<div id="container">
    <div id="1" class="outer"><div id="inner-1" class="inner"></div></div>
    <div id="2" class="outer"><div id="inner-2" class="inner"></div></div>
    <div id="3" class="outer"><div id="inner-3" class="inner"></div></div>
</div>

使用css def：

.inner { display: none; }

和js：

$(".outer").mouseenter ( function () { $(this).find(".inner").fadeIn();});
$(".outer").mouseleave ( function () { $(this).find(".inner").delay(1000).fadeOut();});

Answer 3

我建议：

<div class="check" id="1">1<div id="inner-1" style="display:none;"></div></div>
<div class="check"  id="2">2<div id="inner-2" style="display:none;"></div></div>
<div class="check" id="3">3<div id="inner-3" style="display:none;"></div></div>

JS：

$(function()
  {
         $(".check").mouseenter ( function (e) { alert(e.currentTarget.id) });
  });

DEMO

如何检查id悬停的内容

3 个答案: