可重复使用的 Like 按钮 Jquery 脚本

Question

我设计了一个“点赞”按钮，它使用脚本来切换“点赞”按钮图像的外观，并将结果记录在我的数据库中。它工作正常，但我设计它的方式意味着每个类似按钮的脚本都会重复。我正在尝试找出一种方法，让脚本只出现在我的页面上一次。

HTML

html 在页面加载时创建按钮。 $users5 是一个变量（整数），对于每个喜欢的按钮及其关联的脚本来说都是不同的。 $users5 连接到 div ID 的显示和隐藏。单击 div 启动脚本。

<div id="hide'.$users5.'"style="display:none"><img src="unlovesm.png"></div>
<div id="show'.$users5.'"><img src="lovesm.png"></div><br>

JQuery

根据哪个“类似”图像可见，Jquery 将隐藏该图像并显示另一图像。并用insert.php保存结果

$(document).ready(function(){
    

  $("#hide$users5").click(function(){
    
       var liked = "liked";
     var image = '$users2';
     var user = '$user2';
       $.ajax({
                    url:'insert.php',
                    method:'POST',
                    data:{
                       
                        liked:liked,
                        user:user,
                        image:image
                    },
                   success:function(data){
                         $("#hide$users5").hide();
                         $("#show$users5").show();
                       

                   }
                });
  });
  $("#show$users5").click(function(){
     
       var liked = "unliked";
        var image = '$users2';
         var user = '$user2';
       $.ajax({
                    url:'insert.php',
                    method:'POST',
                    data:{
                        
                        liked:liked,
                         user:user,
                        image:image
                    },
                   success:function(data){
                      $("#hide$users5").show();
                      $("#show$users5").hide();
 
                       
                   }
                });
  });
  

});

我想我需要像 onclick="myFunction('$users5')" 这样的东西来将变量发送到脚本，但需要一些专家的帮助。

我对 JQuery 毫无用处，这就是为什么我的点赞按钮最终变得如此奇怪。

Answer 1

a) 您需要使用

class

概念来通过一个处理程序来完成此操作。向每个按钮添加一个公共类，比如

like-dislike

b) 为喜欢/不喜欢图像添加相应的

data-*

属性 例如：对于喜欢的图像

data-type="liked"

和不喜欢的图像

data-type="unliked"

所以会是这样的：

<div class="like-dislike" data-type="unliked"><img src="unlovesm.png"></div>
<div class="like-dislike" data-type="liked"><img src="lovesm.png"></div><br>

现在 jQuery 代码将会被简化：

$(function(){
  $(".like-dislike").click(function(){
    var obj = $(this);
    var liked = obj.data('type')=='unliked' ? '':'liked';
    var image = '$users2';
    var user = '$user2';
    $.ajax({
        url:'insert.php',
        method:'POST',
        data:{
            liked:liked,
            user:user,
            image:image
        },
        success:function(data){
            obj.hide();
            obj.siblings().show();
        }
    });
  });

});