jQuery个体的mouseenter元素 [英] 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>

由于某些原因，无论您投了赞成"还是反对"，它都没有被接受.无论如何，在mouseenter上都显示您不喜欢该帖子".不知道我到底在做什么错.

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.

推荐答案

.tooltip适用于两种工具提示，而不仅仅是您想要的一种.因此，当鼠标指针仅进入/离开其中一个时，您将同时淡入/淡出两个工具提示.而且，如果<?php the_ID(); ?>为上投票和下投票生成相同的ID，则您将拥有重复的ID，这在HTML中是无效的，并且会导致问题.

.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.

我强烈建议使用HTML类而不是name属性.您知道单个元素上可以有多个类吗?只需用空格(例如 class="vote up")将它们分开.

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").

如果页面上有多个投票按钮，我还将所有投票按钮包装在一个容器div中(以将它们分组在一起). (这样，您可以将ID仅分配给一个元素，然后使用.parent().attr('id')进行访问.)

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>

因此，您的JavaScript代码可以检查这些类的存在.请注意，在下面的代码示例中， .prev() 指的是紧接在前的元素:

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:

编辑:我想到了一个很好的演示页面，该页面显示了这些类对CSS样式也很有用.

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

这篇关于jQuery个体的mouseenter元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！