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たとえば、属性を追加してそのように見つけることができます - ここに1つの方法があります:

    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

.tooltip必要なツールチップだけでなく、両方のツールチップに適用されます。そのため、マウス ポインターがツールチップの 1 つだけに出入りするときに、両方のツールチップが同時にフェード イン/アウトします。また<?php the_ID(); ?>、賛成票と反対票の両方で同じ ID を生成すると、ID が重複し、HTML では無効になり、問題が発生します。

name属性ではなく HTML クラスを使用することを強くお勧めします。1 つの要素に複数のクラスを設定できることをご存知ですか? それらをスペースで区切るだけです（例 class="vote up"）。

また、ページに複数のセットがある場合は、すべての投票ボタンをコンテナー div にラップして (それらをグループ化するために) します。(そうすれば、ID を 1 つの要素にのみ付与し、 を使用してアクセスできます.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);
        });
});
于 2010-11-21T18:37:35.427 に答える
1

現在のツール ヒントについて話すときは、jquery prev() 関数を使用して前のノードを取得できます...つまり、次のようになります。

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

になります：

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

2回使用するため、変数に保存することもできます。

var tooltip = $(this).prev()

編集

これはjsfiddleの例です

于 2010-11-21T17:41:45.473 に答える