0

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

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

  • 当用户将鼠标悬停在选择上时，它会改变，然后从悬停中切换回来......

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

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

  • 如果他们投票喜欢，衬衫将是绿色的，而不喜欢的衬衫将是白色的。

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

当鼠标悬停在上面时，下面的 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 回答