求助：Toyhouse自定义侧边栏收藏按钮功能实现问题

问题核心 #

你复制的原生HTML只是静态结构，Toyhouse的收藏/取消收藏功能完全依赖平台内置的JavaScript逻辑——包括发送AJAX请求更新服务器状态、切换按钮显示文本/图标、更新收藏数。只复制HTML/CSS只会得到一个无法交互的死链接。

解决步骤 #

1. 保留关键属性（你已完成，但需确认一致性） #

确保自定义按钮和原生按钮的以下属性完全匹配：

• 容器类：class="sidebar-li-favorites"（平台JS用于识别按钮容器）
• 角色标识：data-id="character-XXXXXXX"（目标角色的唯一ID）
• 接口地址：data-url（收藏/取消收藏的后端接口）
• 状态标记：th-favorite（1=未收藏状态，0=已收藏状态）
• 内部链接与图标：<a href="#"、fa-star/far fa-star 图标类

2. 补充交互逻辑（必须添加的JavaScript） #

需要手动实现原生JS的核心功能：阻止默认跳转、发送请求更新状态、同步UI显示。以下是适配Toyhouse的代码示例：

// 事件委托：处理自定义侧边栏内的收藏按钮点击
document.addEventListener('click', function(e) {
  // 定位到点击的收藏按钮链接
  const btnLink = e.target.closest('.sidebar-li-favorites a');
  if (!btnLink || !btnLink.closest('.your-custom-sidebar')) return;
  
  e.preventDefault(); // 阻止默认跳转到#的行为
  const btnContainer = btnLink.closest('.sidebar-li-favorites');
  const charId = btnContainer.dataset.id;
  const apiUrl = btnContainer.dataset.url;
  const isUnfavorite = btnContainer.dataset.thFavorite === '0';

  // 获取页面CSRF Token（Toyhouse页面自带，用于验证请求合法性）
  const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

  // 发送AJAX请求到Toyhouse后端接口
  fetch(apiUrl, {
    method: 'POST',
    headers: {
      'X-CSRF-Token': csrfToken,
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: '_method=POST' // 适配Toyhouse使用的Rails框架请求格式
  }).then(response => {
    if (!response.ok) throw new Error('请求失败');
    return response.json();
  }).then(data => {
    // 切换收藏状态的UI显示
    document.querySelectorAll(`.sidebar-li-favorites[data-id="${charId}"]`).forEach(el => {
      el.classList.toggle('hide');
    });
    // 更新所有对应角色的收藏数
    const countElements = document.querySelectorAll(`.th-favorite-count[data-id="${charId}"]`);
    countElements.forEach(el => {
      el.textContent = isUnfavorite ? parseInt(el.textContent) - 1 : parseInt(el.textContent) + 1;
    });
  }).catch(err => {
    console.error('收藏操作失败:', err);
  });
});

3. 替换自定义容器类 #

将代码中的.your-custom-sidebar替换为你自己的侧边栏容器类名，确保只处理你添加的按钮，不干扰原生侧边栏功能。

关键注意事项 #

• CSRF Token不可省略：Toyhouse服务器会拒绝无Token的POST请求，必须从页面的meta标签中获取。
• UI状态需同步：收藏/取消操作后，要切换两个sidebar-li-favorites元素的hide类（一个显示、一个隐藏），和原生逻辑保持一致。
• 动态元素用事件委托：如果你的侧边栏是页面加载后动态生成的，必须使用document.addEventListener的事件委托方式，否则绑定的事件会失效。

内容的提问来源于stack exchange，提问作者Kristen Moore