javascript - 使用 <img> onclick 触发 js 函数

Question

我在“有点”像 Youtube 这样的网站上工作。在这里，我在评论的喜欢/不喜欢选项方面遇到了问题。

我这样做的方式是点击图像(thumbsUp.png 和 thumbsDown.png)我正在调用一个 js 函数(以下是 php 代码，其中 $enregistrement = 评论):

$block .='<img src="'.APP_IMG_PATH.'thumbsup.png" onclick="javascript:addLike('.$enregistrement["Comm_ID"].')" style="width:20px;height:20px"></img>  '.$enregistrement["Likes"].'  '
       . '<img src="'.APP_IMG_PATH.'thumbsdown.png" onclick="javascript:addDislike('.$enregistrement["Comm_ID"].')" style="width:20px;height:20px"></img>'.$enregistrement["Dislikes"].'';

我的 js 函数是:

$block .='
<script>
function addlike(idCo){
    $.ajax({
        type: "GET",
        url: "'.APP_SERVICE_PATH.'SetComment.php",
        data: {Like:1, commID:idCo},
        success: function(data){
        },
        error: function(exc){
              alert("Exception: Une erreur a été levé sur $_GET de addLike(). " + exc);
        }
   )};
}

function addDislike(idCo){
    $.ajax({
       type: "GET",
       url: "'.APP_SERVICE_PATH.'SetComment.php",
       data: {Dislike:1, commID:idCo},
       success: function(data){
       },
       error: function(exc){
           alert("Exception: Une erreur a été levé sur $_GET de addDislike().");
       }
  )};
}
</script>';

但是 onclick 从一开始就不会触发!我以前有 <a href=""> <img> 周围的标签标签，它有效但每次点击都会重新加载页面，这是我想避免的。

有人能看出我做错了什么吗？

注意:我知道我应该将 php 和 html 分开，那是糟糕的编码。请不要对此发表“评论”:D

Answer 1

您的代码有很多问题，首先是 onclick="javascript:addLike('.$enregistrement["Comm_ID"].')"那是一个自调用函数(它被立即调用)，你需要不带括号注册它。

用这个 <a data-id="'.$enregistrement["Comm_ID"].'"></a> 包围你的图像然后像这样调整你的功能

function addDislike(event) {
    // To prevent the default behavior - following the link
    event.preventDefault();

    var idCo = this.dataset.id;
    // or var idCo = $(this).data("id");

    $.ajax({
        type: "GET",
        url: "'.APP_SERVICE_PATH.'SetComment.php",
        data: {Dislike:1, commID:idCo},
        success: function(data){
        },
        error: function(exc){
        alert("Exception: Une erreur a été levé sur $_GET de 
        addDislike().");
   }

}