Question

我一直在实施一个喜欢和不喜欢的系统。代码如下：

<span class="col-5 l bbox" onclick="like('.$id.');"><img src="/img/like.png" /></span>

如上所示，当用户点击上面的块时，我创建了一个函数调用，通过ajax调用在系统中注册like。

这里，$id是我传递给函数的post_id。

代码如下：

function like(id) {
  var pid = id;
  $.ajax({
       url: '/like.php?id=' + pid,
       type: "get",
  }).done(function(data) {
     $('#like' + pid).html(data);
    });
}

但是，问题在于，单个用户可以根据需要多次点击like，系统仍会注册这些内容。

我想实现一个系统，在这个系统中，用户只能为单个帖子或单个$id注册一个喜欢或不喜欢的内容。

Answer 1

您可以尝试立即删除onclick属性，如下所示：

onclick="like('.$id.'); $(this).attr(\'onclick\',\'\');"

Answer 2

首次呈现页面时，如果用户从未点击过喜欢或不喜欢的按钮，则必须显示此HTML

await Font.loadAsync({
  'Material Icons': require('@expo/vector-icons/fonts/MaterialIcons.ttf')
})

如果用户已经点击了类似按钮，则必须显示此HTML

<span id="preference-container">
  <span id="like-span" class="col-5 l bbox" onclick="like('.$id.', true);">
    <img src="/img/like.png" />
  </span>
  <span id="dislike-span" class="col-5 l bbox" onclick="like('.$id.', false);">
    <img src="/img/dislike.png" />
  </span>
</span>

否则你会显示这个HTML

<span id="preference-container">
  <span id="dislike-span" class="col-5 l bbox" onclick="like('.$id.', false);">
    <img src="/img/dislike.png" />
  </span>
</span>

然后在类似的功能上，您必须以dinamically方式更改首选项按钮

<span id="preference-container">
  <span id="like-span" class="col-5 l bbox" onclick="like('.$id.', true);">
    <img src="/img/like.png" />
  </span>
</span>

Answer 3

在like.php中，您需要针对帖子ID检查用户ID，以避免重复喜欢。如果是客人（用户未登录），则可能记录一些标识符，例如IP？

Answer 4

我建议从客户端处理这个以添加数据属性来管理喜欢或不喜欢按钮的状态：

like($id) {
  var state = $(this).data('isactive');
  if(!state) {
    // your ajax function
    $(this).data('isactive', true);
  }
}


dislike($id) {
  var state = $(this).data('isactive');
  if(!state) {
    // your ajax function
    $(this).data('isactive', true);
  }
}

并且还管理用户是否点击了like按钮然后将data-isactive属性设置为false，反之亦然。您可以在浏览器的本地存储中维护按钮状态。

希望这可以帮助你。

Answer 5

在函数调用后立即删除属性onclick：

<span class="col-5 l bbox" onclick="like('.$id.'); $(this).removeAttr(\'onclick\');"><img src="/img/like.png" /></span>

Jquery阻止多个函数调用

5 个答案: