jquery individual mouseenter for elements

问题

I'm working on a "up, down" voting script. When the user for example hovers over the "Up" button a tooltip should fadeIn over that respective button and say "You like this post" or whatnot. The tooltip however fades in on all buttons..

The script is longer but here is the tooltip part.

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

Also for some reason it doesn't pick up whether you voted "up" or "down". On mouseenter it displays "You dislike this post" regardless. Not sure what exactly I'm doing wrong.

回答1:

.tooltip applies to both tooltips, not just the one you want. So you are fading in/out both tooltips at the same time when the mouse pointer enters/leaves just one of them. And if <?php the_ID(); ?> generates the same ID for both the upvote and the downvote, you would have duplicate ID's, which is not valid in HTML and will lead to problems.

I strongly recommend using HTML classes rather than name attributes. Did you know that you can have multiple classes on a single element? Just separate them by spaces (e.g. class="vote up").

I would also wrap all the vote buttons in a container div (to group them together) if there will be more than one set on a page. (That way, you can give the ID to only one element and access it using .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>

So then your JavaScript code could check for the existence of these classes. Note that in the below code example, .prev() refers to the element immediately before:

EDIT: I came up with a good demo page that shows how useful the classes can be to CSS styles as well.

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

回答2:

This line:

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

is selecting both divs. You can e.g add an id attribute and find them like that - here's one way:

    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>

回答3:

When talking about the current tool tip you can use the jquery prev() function to get the previous node... so this:

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

becomes:

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

You may as well store that in a variable since you use it twice:

var tooltip = $(this).prev()

EDIT

Here is an example on jsfiddle

来源：https://stackoverflow.com/questions/4239178/jquery-individual-mouseenter-for-elements

标签

jquery

vote

mouseenter