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').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 2

在谈论当前工具提示时，您可以使用jquery prev（）函数获取上一个节点...所以这个：

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

变为：

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

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

var tooltip = $(this).prev()

修改

Here is an example on jsfiddle

Answer 3

.tooltip适用于两个工具提示，而不仅仅适用于您想要的工具提示。因此，当鼠标指针进入/离开其中一个时，您同时淡入/淡出两个工具提示。如果<?php the_ID(); ?>为upvote和downvote生成相同的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()指的是紧接在之前的元素：

编辑：我想出了a good demo page，它显示了这些类对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);
        });
});

jquery单个mouseenter元素

3 个答案: