投票按钮 - on_hover功能对$ .get结果不起作用

Question

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

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

• 当用户将鼠标悬停在选区上时，它会改变，然后将鼠标悬停交换...

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

---

因此，在他们点击之前，我运行一个函数getVoteImages();，查询投票表以查看用户之前是否已投票。

• 如果他们投票赞成，那么这件衬衫将是绿色的，不喜欢的衬衫会是白色的。

• 如果他们投票不喜欢，不喜欢的衬衫会是红色的，就像衬衫会是白色的。如果没有投票，两件衬衫都是白色的。

当鼠标悬停时，下面的javascript会交换图片：

以下是Chrome的输出HTML：您可以看到onhover，this_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函数，该函数将对一个likecounter.php脚本运行jquery $ .get AJAX调用，该脚本会将投票加载到db中，并增加喜欢或不喜欢。这样做将首先隐藏（$("#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({ .....函数？

Answer 1

原来我不应该隐藏原始图像......我应该删除它们，以便鼠标悬停在隐藏图像上与$ .get：

中的替换图像不冲突

所以：$("#like, #dislike").remove();

而不是：$("#like, #dislike").hide();