如何高效实现评论系统中指定作者Follow/Unfollow状态批量切换

API 探路者

2026-8-22

高效实现嵌套评论系统的批量关注状态切换

问题核心

嵌套评论结构中，普通选择器会误匹配目标作者评论的子评论里其他作者的工具盒，而循环遍历效率偏低，需要精准且高效的DOM操作方案。

解决方案

通过精准过滤目标元素+批量类操作实现，避免循环重复执行，同时排除子评论的干扰：

获取目标作者：从点击按钮所在的评论元素中提取data-author值
精准定位工具盒：找到所有该作者的评论元素，再过滤出仅属于该作者的工具盒（排除子评论中其他作者的工具盒）
批量切换状态：一次性对所有匹配的工具盒中的follow/unfollow元素切换d-none类

代码实现

// 绑定关注/取消关注按钮的点击事件
$('.follow, .unfollow').on('click', function(e) {
  e.preventDefault();
  
  const $triggerBtn = $(this);
  const targetAuthor = $triggerBtn.closest('[data-author]').attr('data-author');
  const isUnfollow = $triggerBtn.hasClass('unfollow');

  // 精准筛选目标作者的所有工具盒：仅保留那些最近的data-author父元素是目标作者的tools
  const $targetToolboxes = $('[data-author="' + targetAuthor + '"]')
    .find('.tools')
    .filter(function() {
      return $(this).closest('[data-author]').attr('data-author') === targetAuthor;
    });

  // 批量切换显示状态
  if (isUnfollow) {
    $targetToolboxes.find('.unfollow').addClass('d-none');
    $targetToolboxes.find('.follow').removeClass('d-none');
  } else {
    $targetToolboxes.find('.follow').addClass('d-none');
    $targetToolboxes.find('.unfollow').removeClass('d-none');
  }

  // 此处添加后端请求逻辑，比如AJAX发送关注状态变更请求
});