如何复用jQuery点赞按钮脚本，避免重复编写代码？

第一步：重构HTML结构，用数据属性传递参数 #

把每个点赞相关元素用容器包裹，将$users5、$users2、$user2这些关键变量存在data属性中，同时给切换元素统一加类名，避免依赖动态ID：

<!-- 每个点赞组件的容器，存储必要参数 -->
<div class="like-container" data-user="<?php echo $user2; ?>" data-image="<?php echo $users2; ?>" data-id="<?php echo $users5; ?>">
  <!-- 未点赞状态（默认隐藏） -->
  <div class="like-btn like-unliked" style="display:none">
    <img src="unlovesm.png">
  </div>
  <!-- 已点赞状态（默认显示） -->
  <div class="like-btn like-liked">
    <img src="lovesm.png">
  </div>
</div>
<br>

第二步：编写通用jQuery脚本（仅需一份） #

利用事件委托绑定点击事件，从容器的data属性中获取参数，统一处理点赞/取消点赞逻辑：

$(document).ready(function(){
  // 事件委托：只绑定一次，监听所有点赞按钮点击
  $(document).on('click', '.like-btn', function(){
    var $container = $(this).closest('.like-container');
    // 从容器data属性读取参数
    var userId = $container.data('user');
    var imageId = $container.data('image');
    
    // 判断当前点击的状态
    var isLiked = $(this).hasClass('like-liked');
    var likedStatus = isLiked ? 'unliked' : 'liked';

    // 发送AJAX请求
    $.ajax({
      url: 'insert.php',
      method: 'POST',
      data: {
        liked: likedStatus,
        user: userId,
        image: imageId
      },
      success: function(data){
        // 切换显示状态
        $container.find('.like-liked').toggle(!isLiked);
        $container.find('.like-unliked').toggle(isLiked);
      }
    });
  });
});

关键优化点说明 #

• 事件委托：避免给每个按钮单独绑定事件，减少脚本冗余，同时支持动态生成的点赞组件。
• 数据属性（data-*）：将组件唯一参数存在容器上，无需通过动态ID拼接传递变量，代码更清晰易维护。
• 统一逻辑：点赞/取消点赞共用一套逻辑，通过状态判断区分操作，消除重复代码。

你提到的onclick传参方案（可选） #

如果坚持用onclick方式，也可以实现，但不如事件委托优雅：

重构后的HTML

<div id="hide<?php echo $users5; ?>" style="display:none" onclick="toggleLike('liked', '<?php echo $user2; ?>', '<?php echo $users2; ?>', '<?php echo $users5; ?>')">
  <img src="unlovesm.png">
</div>
<div id="show<?php echo $users5; ?>" onclick="toggleLike('unliked', '<?php echo $user2; ?>', '<?php echo $users2; ?>', '<?php echo $users5; ?>')">
  <img src="lovesm.png">
</div>
<br>

通用函数

function toggleLike(likedStatus, userId, imageId, likeId){
  $.ajax({
    url: 'insert.php',
    method: 'POST',
    data: {
      liked: likedStatus,
      user: userId,
      image: imageId
    },
    success: function(data){
      $("#hide" + likeId).toggle(likedStatus === 'unliked');
      $("#show" + likeId).toggle(likedStatus === 'liked');
    }
  });
}

更推荐第一种事件委托+数据属性的方案，符合现代前端最佳实践，代码扩展性更强。

内容的提问来源于stack exchange，提问作者AL W