php - jquery 悬停有效，onclick 无效

Question

我在我的漫画网站上添加了喜欢/不喜欢的功能。

我为它制作了自定义图形。

• 当用户将鼠标悬停在选择上时，它会发生变化，然后切换回悬停...

• 当用户点击时，它将交换图像，直到他们再次点击相同的投票，它将切换回原始图像。

悬停有效，但单击无效...我正在尝试使用 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>

有什么想法吗？我什至在点击函数中放置了一个警报(“点击”)，但它甚至没有调用它。

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

这样:

$("#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');
       }
    }
});