Question

我有一个Jvascript函数，当单击图像时，会运行一个php文件，并且单击的图像会更新。我做了另一个功能，如果再次按下它会改变图像。但是在运行第一个函数后，如果再次单击该图像，则不会发生任何事情。这些是我的功能：

<script>
    function upvote(id,bruger_id)
    {
        $.get("scripts/upvote.php?id="+id+"&bruger_id="+bruger_id, function() {
            // Update image
            $('.changeUp').attr('src', 'images/up.png');
            return;
        });
    }

    function noUpvote(id,bruger_id)
    {
        $.get("scripts/removevote.php?id="+id+"&bruger_id="+bruger_id, function() {
            // Update image
            $('.removeUp').attr('src', 'images/neutral_up.png');
            return;
        });
    }
</script>

这是我调用函数的地方。显示的基本图像基于cookie。

<img class="changeUp" 
    onclick="upvote('.$feed[$loaded]["id"].','.$feed[$loaded]["bruger_id"].');" 
    src="images/neutral_up.png" width="20px">

我意识到错误是它只是再次调用相同的函数，因此图像不会改变回来。但是我怎么能解决这个问题呢？

Answer 1

试试这个：

function upvote(id,bruger_id)
     {
         $.get("scripts/upvote.php?id="+id+"&bruger_id="+bruger_id, function() {
            $('.changeUp').attr('src', 'images/up.png');
            $('.changeUP').attr('onclick', 'noUpvote('.$feed[$loaded]["id"].','.$feed[$loaded]["bruger_id"].');');
         });
     }

    function noUpvote(id,bruger_id)
    {
         $.get("scripts/removevote.php?id="+id+"&bruger_id="+bruger_id, function() {
            $('.changeUP').attr('src', 'images/neutral_up.png');
            $('.changeUP').attr('onclick', 'upvote('.$feed[$loaded]["id"].','.$feed[$loaded]["bruger_id"].');');
         });
    }

Answer 2

我认为问题在于，在您的第一个方法upvote()中，您正在使用带有changeUp的类选择器但是您永远不会使用jQuery更改img标记的类，那么当您调用第二种方法，使用类选择器removeUp，该类没有任何内容，请尝试：

function upvote(id, bruger_id)
{
  $.get("scripts/upvote.php?id="+id+"&bruger_id="+bruger_id, function() {
    $('.changeUp').attr('src', 'images/up.png');
    $('.changeUp').removeClass('changeUp').addClass('removeUp');
  }
}

你的img会是这样的：

<img class="removeUp" ...>

您可以调用第二种方法并更改src属性。

问候。

Javascript函数不会运行两次

2 个答案: