0

我正在研究“向上，向下”投票脚本。例如，当用户将鼠标悬停在“向上”按钮上时，工具提示应该在相应的按钮上淡入并说“你喜欢这篇文章”或诸如此类的东西。然而，工具提示会淡入所有按钮..

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

$(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 上，无论如何它都会显示“你不喜欢这篇文章”。不知道我到底做错了什么。

4

3 回答 3

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>
于 2010-11-21T17:33:49.503 回答
1

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

于 2010-11-21T17:41:45.473 回答
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);
        });
});
于 2010-11-21T18:37:35.427 回答