php - jquery onhover 有效，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>

有什么想法吗？我什至在 click 函数中放置了一个 alert("clicked") ，但它甚至没有调用它。

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');
       }
    }
});