0

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

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

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

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

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

オンホバーは機能しますが、オンクリックは機能しません...私はこれをJqueryで実装しようとしています：

<script type="text/javascript">
  var images = {
      "like": [
        "./images/SiteDesign/like_hover.png",
        "./images/SiteDesign/like.png",
        "./images/SiteDesign/liked.png"         
        ],
      "dislike": [
        "./images/SiteDesign/dislike_hover.png",
        "./images/SiteDesign/dislike.png",
        "./images/SiteDesign/disliked.png"
        ]);

jQuery(document).ready(function($) {
                $("#like, #dislike").hover(function(e) {
                     // mouseover handler
                     if (this.id in images) // check for key in map
                         this.src = images[this.id][0];
                }, function(e) {
                     // mouseout handler
                     if (this.id in images)
                         this.src = images[this.id][1];
                });

                $("#like, #dislike").click(function(e) {
                    alert("clicked");
                    if (this.id in images) // check for key in map
                         this.src = images[this.id][2];
                }, function(e) {
                     // mouseout handler
                     if (this.id in images)
                         this.src = images[this.id][1];
                });                     
            });
</script>

何かご意見は？クリック機能内にアラート（「クリック」）を入れましたが、それを呼び出していません。

4

1 に答える 1

2

これを置き換えます：

$("#like, #dislike").click(function(e) {
      alert("clicked");
      if (this.id in images) // check for key in map
            this.src = images[this.id][2];
}, function(e) {
      // mouseout handler
      if (this.id in images)
            this.src = images[this.id][1];
});

これとともに：

$("#like, #dislike").click(function(e) {
      alert("clicked");
      if (this.id in images)
            this.src = images[this.id][2];
});

編集：

実際、これを行うだけの方が簡単です：

$("#like, #dislike").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];
    },
    click: function() {
       if (this.id in images) {
           this.src = images[this.id][2];
           $(this).off('mouseenter mouseleave');
       }
    }
});
于 2013-03-04T02:55:54.553 に答える