0

コミックサイトに好き嫌い機能を追加しました。

そのためのカスタムグラフィックを作成しました。

  • ユーザーが選択範囲にカーソルを合わせると、選択範囲が変更され、ホバーをオフに戻します...

  • ユーザーがクリックすると、同じ投票をもう一度クリックするまで画像が交換され、元の投票に戻ります。

そのため、クリックする前に、getVoteImages();Voteテーブルにクエリを実行して、ユーザーが以前に投票したことがあるかどうかを確認する関数を実行します。

  • 彼らが賛成票を投じた場合、シャツは緑になり、嫌いなシャツは白になります。

  • 嫌いなものに投票した場合、嫌いなシャツは赤になり、好きなシャツは白になります。投票しない場合、両方のシャツは白です。

カーソルを合わせると、以下のJavaScriptが画像を次のように交換します。

ここに画像の説明を入力してください

Chromeからの出力HTMLは次のとおりです。onhoverthis_hover();が正しく呼び出され、画像が変化することがわかります。

<img src="./images/SiteDesign/liked.png" id="like" onclick="callBoth(this.id)">
<img src="./images/SiteDesign/dislike_hover.png" id="dislike" onclick="callBoth(this.id)" onmouseover="this_hover(this.id)">

ユーザーがクリックすると、javascript関数が呼び出され、jquery $ .get AJAX呼び出しがlikecounter.phpスクリプトに対して実行されます。このスクリプトは、投票をデータベースにロードし、好きまたは嫌いをインクリメントします。これを行うと、最初に（$("#like, #dislike").hide();）が非表示になり、元の投票画像が更新された投票に置き換えられます...したがって、好きな場合は緑のシャツ、嫌いな場合は赤いシャツ、選択されていない場合は白いシャツのいずれかになります。好き嫌いの両方に投票することはできません。

ここに画像の説明を入力してください

$ .get AJAXは、更新された投票画像をに出力し<span id="choice"></span>ます。したがって、以下では、出力されたHTMLで、元の投票画像が非表示style="display: none;"になり、置換画像がに表示されていることがわかります<span id="choice"></span>。置換画像に同じ呼び出しが含まれているため、これは奇妙です...onmouseover

ここに画像の説明を入力してください

問題：

出力HTMLは正しいように見えます...したがって、サーバーから結果が返されたときにホバー関数が再度呼び出されない理由がわかりません。

alert(id);$ .getから投票画像が返されたときに関数が呼び出されているかどうかをテストするために入れてみましたが、IDは問題なくアラートを出します。

Javascript：

<script type="text/javascript">
    function this_hover(id) {
        alert(id);
        var images = {
            "like": [
                "./images/SiteDesign/like_hover.png",
                "./images/SiteDesign/like.png", 
            ],
            "dislike": [
                "./images/SiteDesign/dislike_hover.png",
                "./images/SiteDesign/dislike.png",
            ]
        }
        $("#"+id).on({
            mouseenter: function() {
                if (this.id in images) this.src = images[this.id][0];

            },
            mouseleave: function() {
               if (this.id in images) this.src = images[this.id][1];
            }
        });
    }

    function callBoth(choice) {
        likeCounter(choice);
    }

    function likeCounter(choice) {  

        $.get("./scripts/likecounter.php", {_choice : choice, _site : "<?php echo $site; ?>", _id : <?php echo $imgid; ?>},
            function(returned_data) {
                $("#choice").html(returned_data);
            }
        );
        $("#like, #dislike").hide();
        $("#getlikes").hide();
    }   
</script>

投票をクリックしたときに画像の交換が機能しない理由について何か考えはありますか？なぜ機能しているのに機能alert(id)していないの$("#"+id).on({ .....ですか？

4

1 に答える 1

0

元の画像を非表示にするべきではないことがわかりました...非表示の画像の上にマウスを置くと$.getの置換画像と競合しないように、それらを削除する必要があります。

したがって、この：$("#like, #dislike").remove();

これの代わりに：$("#like, #dislike").hide();

于 2013-03-05T05:34:39.663 に答える