Question

我有一个像这样的基本代码（多次重复）：

<h3 class="header">The header</h3>
<div class="content"> The content 
    <div class="showUp">hidden text</div>
</div>
<h3 class="header">The header2</h3>
<div class="content"> The content 2
    <div class="showUp">hidden text 2</div>
</div>

我想创建一个翻转事件，如果我将鼠标悬停在h3 或上，div.content将显示.showup类。如果我滚动div.content类，我只设法创建一个规则：

$('.content').mouseenter(function() {
    $(this).find(".showUp").animate({left: 0},300)
})
.mouseleave(function() {
    $(this).find(".showUp").animate({
        left: -200
    }, 500);
});

我知道我可以像这样为标题创建一个事件：

$('h3').mouseenter(function() {
    $(this)**.next()**.find(".showUp")...
});

但我如何将这些元素绑定到元素上以使用“this”这个词来做同样的事情

Answer 1

这应该可以解决问题。

$('.content, h3')
    .mouseenter(function() {
        $(this).find('+ .content > .showUp').add($(this).find('> .showUp')).stop().animate({left: 0},300)});
    })
    .mouseleave(function() {
        $(this).find('+ .content > .showUp').add($(this).find('> .showUp')).stop().animate({left: -200},500)});
    });

我们将事件监听器附加到 .content和h3。然后在事件监听器中，如果它存在（+ .content > .showUp）或直接子（> .showUp），我们会立即搜索它。

所以，无论如何我们会将.showUp div设为动画。

我还添加了.stop()方法，以便在动画制作动画之前停止动画（因此，如果您将h3悬停在.content上，则不会有一些奇怪的行为。

我在这里做了basic fiddle here，所以你可以看到它是如何工作的。

Answer 2

创建一个“allMouseEnter”函数，并从$('.content').mouseenter和$(h3).ouseenter函数调用它。也许它可以帮助你，但我不确定。只有你可以试试这个。

Answer 3

这个例子不知何故不起作用（也许我做错了）但我发现而不是写这个：

.add($(this).find('+ content > .showUp'))

我写了这篇文章，它适合我：

.add($(this).next().find('.showUp')

如何为2个元素绑定相同的操作

3 个答案: