jquery 元素的单独 mouseenter

Question

我正在编写“向上、向下”投票脚本。例如，当用户将鼠标悬停在“向上”按钮上时，工具提示应淡入相应按钮上并显示“您喜欢这篇文章”或诸如此类的内容。然而，工具提示会在所有按钮上淡入。

脚本较长，但这是工具提示部分。

$(document).ready(function() {
$('.vote').mouseenter(function(e) {
        var vote_status = $(this).attr("name");
        $('.tooltip').fadeIn(200);
        if( vote_status = "up" ) {
            $('.tooltip').html('You like this post');
        } 
        if ( vote_status = "down" ) {
            $('.vp_tooltip').html('You dislike this post');
        }
})
.mouseleave(function(e) {
        $('.tooltip').fadeOut(200);
});                                                                        
});

HTML..

<div class="tooltip"></div>
<a name="up" class="vote" id="<?php the_ID(); ?>">Up</a>

<div class="tooltip"></div>
<a name="down" class="vote" id="<?php the_ID(); ?>">Down</a>

此外，由于某种原因，它不会识别您是否投票“赞成”或“反对”。不管怎样，在 mouseenter 上它都会显示“你不喜欢这篇文章”。不确定我到底做错了什么。

Answer 1

.tooltip 适用于两个工具提示，而不仅仅是您想要的工具提示。因此，当鼠标指针进入/离开其中一个工具提示时，您会同时淡入/淡出两个工具提示。如果 为赞成票和反对票生成相同的 ID，您将拥有重复的 ID，这在 HTML 中无效，并且会导致问题。

我强烈建议使用 HTML 类而不是 name 属性。您是否知道单个元素上可以有多个类？只需用空格分隔它们（例如 class="vote up"）。

如果页面上有多个投票按钮，我还会将所有投票按钮包装在一个容器 div 中（将它们分组在一起）。 （这样，您可以仅将 ID 赋予一个元素并使用 .parent().attr('id') 访问它。）

<div class="votePanel">
    <div class="tooltip"></div>
    <a class="vote up">Up</a>

    <div class="tooltip"></div>
    <a class="vote down">Down</a>
</div>

这样您的 JavaScript 代码就可以检查这些类是否存在。请注意，在下面的代码示例中， .prev() 指的是之前的元素：

编辑：我想出了一个很好的演示页面展示了这些类对于 CSS 样式也有多么有用。

$(document).ready(function() {
    $('.vote')
        .mouseenter(function(e) {
            var vote = $(this),
                tooltip = vote.prev();

            tooltip.fadeIn(200);
            if(vote.hasClass('up')) tooltip.html('You like this post');
            if(vote.hasClass('down')) tooltip.html('You dislike this post');
        })
        .mouseleave(function(e) {
            $(this).prev().fadeOut(200);
        });
});

Answer 2

这一行：

$('.tooltip').fadeIn(200);

正在选择两个 div。例如，您可以添加一个 id 属性并像这样找到它们 - 这是一种方法：

    if( vote_status = "up" ) {
        $('#tooltip_up').fadeIn(200);
        $('.tooltip').html('You like this post');
    } 

<div id="tooltip_up" class="tooltip"></div>
<a name="up" class="vote" id="<?php the_ID(); ?>">Up</a>

Answer 3

当谈论当前的工具提示时，您可以使用 jquery prev() 函数来获取前一个节点...因此：变成

$('.tooltip').fadeIn(200);

：

$(this).prev().fadeIn(200);

您也可以将其存储在变量中，因为您使用了两次：

var tooltip = $(this).prev()

编辑

这是 jsfiddle 的示例