jquery индивидуальный мышиный центр для элементов - PullRequest
Новая
       7

jquery индивидуальный мышиный центр для элементов

0 голосов
/ 21 ноября 2010

Я работаю над сценарием голосования «вверх, вниз». Когда пользователь, например, наводит курсор на кнопку «Вверх», всплывающая подсказка должна появиться над соответствующей кнопкой и сказать «Вам нравится этот пост» или еще много чего. Однако всплывающая подсказка появляется на всех кнопках.

Сценарий длиннее, но здесь есть подсказка. 

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

Кроме того, по какой-то причине он не определяет, проголосовали ли вы «за» или «против». При указании мыши на нем отображается сообщение «Вам не нравится этот пост». Не уверен, что именно я делаю не так.

Ответы [ 3 ]

1 голос
/ 21 ноября 2010

Говоря о текущей подсказке, вы можете использовать функцию jquery prev (), чтобы получить предыдущий узел ... так что: 

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

становится: 

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

Вы также можете сохранить это в переменной, так как вы используете ее дважды: 

var tooltip = $(this).prev()

РЕДАКТИРОВАТЬ

Вот пример jsfiddle

1 голос
/ 21 ноября 2010

.tooltip относится к обоим подсказкам, а не только к тем, которые вы хотите.Таким образом, вы одновременно вводите / выводите обе подсказки, когда указатель мыши вводит / покидает только одну из них.И если <?php the_ID(); ?> генерирует один и тот же идентификатор для повышения и понижения голосов, у вас будут дубликаты идентификаторов, которые недопустимы в HTML и приведут к проблемам.

Я настоятельно рекомендую использовать классы HTML вместо name атрибутов.Знаете ли вы, что вы можете иметь несколько классов на одном элементе?Просто разделите их пробелами ( например class="vote up").

Я бы также обернул все кнопки голосования в контейнере div (чтобы сгруппировать их вместе), если будет более одного наборана странице.(Таким образом, вы можете присвоить идентификатор только одному элементу и получить к нему доступ, используя .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);
        });
});
1 голос
/ 21 ноября 2010

Эта строка: 

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

выбирает оба деления. Например, вы можете добавить атрибут 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>
...