1

I have ids on page like:

<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>

Then, i have js to toggle visibility on hover parent id:

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

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

So the problem is how to send hovering id there, i think i must assigh hovering id to var and send it, something like that:

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

But how to get only hovering id?

Thanks in advance.

4

3 回答 3

3

为所有这些添加一个类，比如“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);
});

这是一个工作的jsFiddle

于 2013-07-07T09:57:45.543 回答
1

我建议这样做：

<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) });
  });

演示

于 2013-07-08T08:05:43.757 回答
1

您还可以使用 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 定义：

.inner { display: none; }

和js：

$(".outer").mouseenter ( function () { $(this).find(".inner").fadeIn();});
$(".outer").mouseleave ( function () { $(this).find(".inner").delay(1000).fadeOut();});
于 2013-07-07T10:40:22.107 回答