对于元件的jquery个体的mouseenter(jquery individual mouseen

我工作的一个“上，下”投票脚本。举例而言，当用户将鼠标悬停在“向上”按钮的工具提示应该淡入超过该相应按钮，并说：“你喜欢这个岗位”或诸如此类的东西。然而，工具提示淡入上的所有按钮..

该脚本较长，但这里是提示的一部分。

$(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适用于工具提示，不只是一个你想要的。所以，你在当鼠标指针进入的同时淡入/淡出两个提示/离开只是其中之一。并且如果<?php the_ID(); ?> <?php the_ID(); ?>生成相同的ID为给予好评和downvote两个，你就必须重复的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>