请求优化Blogger书签组件：切换按钮与无限滚动适配

1. 实现书签图标切换（添加/删除状态） #

核心逻辑 #

• 用localStorage存储书签ID列表，持久化用户选择
• 初始渲染时根据存储状态切换图标
• 点击图标时双向切换状态：添加则存入localStorage并切换为删除图标；删除则移除记录并切换回添加图标
• 模态列表删除书签后，同步更新对应文章的图标状态

代码实现 #

HTML（替换原有图标结构）

<!-- 每个文章的书签按钮，必须添加data-post-id存储文章唯一ID -->
<button class="bookmark-btn" data-post-id="POST_UNIQUE_ID">
  <!-- 添加书签图标 -->
  <svg class="icon-bookmark-add" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
  </svg>
  <!-- 删除书签图标，默认隐藏 -->
  <svg class="icon-bookmark-remove" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:none;">
    <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
    <line x1="18" y1="6" x2="6" y2="18"></line>
    <line x1="6" y1="6" x2="18" y2="18"></line>
  </svg>
</button>

JavaScript（状态切换逻辑）

// 初始化所有书签按钮的状态
function initBookmarkState() {
  const savedBookmarks = JSON.parse(localStorage.getItem('blogger_bookmarks')) || [];
  document.querySelectorAll('.bookmark-btn').forEach(btn => {
    const postId = btn.dataset.postId;
    const addIcon = btn.querySelector('.icon-bookmark-add');
    const removeIcon = btn.querySelector('.icon-bookmark-remove');
    
    if (savedBookmarks.includes(postId)) {
      addIcon.style.display = 'none';
      removeIcon.style.display = 'inline-block';
    } else {
      addIcon.style.display = 'inline-block';
      removeIcon.style.display = 'none';
    }
  });
}

// 处理书签按钮点击事件
function toggleBookmark(e) {
  const btn = e.target.closest('.bookmark-btn');
  if (!btn) return;
  
  const postId = btn.dataset.postId;
  const addIcon = btn.querySelector('.icon-bookmark-add');
  const removeIcon = btn.querySelector('.icon-bookmark-remove');
  let savedBookmarks = JSON.parse(localStorage.getItem('blogger_bookmarks')) || [];
  
  if (savedBookmarks.includes(postId)) {
    // 执行删除逻辑
    savedBookmarks = savedBookmarks.filter(id => id !== postId);
    addIcon.style.display = 'inline-block';
    removeIcon.style.display = 'none';
    // 同步删除模态列表对应项（需确保模态项有data-post-id属性）
    const modalItem = document.querySelector(`.bookmark-modal-item[data-post-id="${postId}"]`);
    modalItem?.remove();
  } else {
    // 执行添加逻辑
    savedBookmarks.push(postId);
    addIcon.style.display = 'none';
    removeIcon.style.display = 'inline-block';
    // 同步添加到模态列表（根据你的模态结构自定义实现）
    appendToBookmarkModal(postId);
  }
  
  localStorage.setItem('blogger_bookmarks', JSON.stringify(savedBookmarks));
}

// 处理模态列表的删除按钮点击
function deleteFromModal(e) {
  const deleteBtn = e.target.closest('.bookmark-modal-delete');
  if (!deleteBtn) return;
  
  const postId = deleteBtn.dataset.postId;
  let savedBookmarks = JSON.parse(localStorage.getItem('blogger_bookmarks')) || [];
  savedBookmarks = savedBookmarks.filter(id => id !== postId);
  localStorage.setItem('blogger_bookmarks', JSON.stringify(savedBookmarks));
  
  // 同步更新对应文章的书签图标
  const targetBtn = document.querySelector(`.bookmark-btn[data-post-id="${postId}"]`);
  if (targetBtn) {
    const addIcon = targetBtn.querySelector('.icon-bookmark-add');
    const removeIcon = targetBtn.querySelector('.icon-bookmark-remove');
    addIcon.style.display = 'inline-block';
    removeIcon.style.display = 'none';
  }
  
  // 移除模态列表项
  deleteBtn.closest('.bookmark-modal-item').remove();
}

// 页面加载完成后初始化状态
document.addEventListener('DOMContentLoaded', initBookmarkState);

2. 修复无限滚动时书签组件失效问题 #

核心原因 #

无限滚动加载的新文章属于动态生成元素，直接绑定到元素上的事件无法生效，必须用事件委托将事件绑定到静态父元素（或document）上。

代码调整 #

// 替换原有直接绑定的点击事件，改用事件委托统一处理
document.addEventListener('click', function(e) {
  toggleBookmark(e);
  deleteFromModal(e);
});

// 无限滚动加载完成后，重新初始化新元素的书签状态
// 需根据你的Blogger无限滚动实现，在新内容加载完成后调用此函数
function onNewPostsLoaded() {
  initBookmarkState();
}

// 示例：滚动触发加载的监听逻辑（根据实际实现调整）
window.addEventListener('scroll', function() {
  const scrollTriggerPoint = document.body.offsetHeight - window.innerHeight - 100;
  if (window.scrollY >= scrollTriggerPoint) {
    // 假设loadMorePosts是你的加载新文章函数，完成后调用初始化
    // loadMorePosts().then(onNewPostsLoaded);
  }
});

补充CSS（优化图标交互样式） #

.bookmark-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: #666;
  transition: color 0.2s ease;
}

.bookmark-btn:hover {
  color: #ffc107;
}

.icon-bookmark-add, .icon-bookmark-remove {
  width: 24px;
  height: 24px;
}

使用注意事项 #

1. 所有书签按钮、模态列表项及删除按钮必须添加data-post-id属性，值为文章的唯一标识（可使用Blogger自带的data-post-id）
2. 无限滚动加载新内容后，务必调用onNewPostsLoaded()初始化新元素的书签状态
3. 模态列表的添加逻辑appendToBookmarkModal()需根据你的模态框结构自行实现

内容的提问来源于stack exchange，提问作者zet.io