如何实现点击心形按钮将对应卡片切换加入指定Wishlist区域展示的功能

实现方案 #

实现思路 #

• 给每个卡片添加唯一data-card-id属性用于去重判断
• 给收藏区域指定唯一IDwishlistContainer方便定位
• 点击爱心按钮时，先切换按钮选中状态，再判断当前卡片是否已存在于收藏区：
  • 已存在则从收藏区移除对应卡片
  • 不存在则克隆卡片结构插入到收藏区
• 整套逻辑仅需单个JS函数实现，页面新增卡片/列表无需修改JS逻辑，仅需给新卡片补充唯一data-card-id即可正常使用

完整可运行代码 #

HTML代码

<!-- 卡片列表区域 -->
<div class="card" data-card-id="card1">
  <span class="wishlist" onclick="toggleWishlist(this)">Heart</span>
  <ul>
    <li>Windows 10</li>
    <li>8GB Ram</li>
    <li>1TB SSD</li>
    <li>Intel Core i7 (11th Gen)</li>
    <li>NVIDIA GeForce</li>
    <li>Full HD Display</li>
    <li>Dolby Audio</li>
    <li>1 Warranty</li>
  </ul>
</div>
<div class="card" data-card-id="card2">
  <span class="wishlist" onclick="toggleWishlist(this)">Heart</span>
  <ul>
    <li>Windows 20</li>
    <li>16GB Ram</li>
    <li>10TB SSD</li>
    <li>Intel Core i15 (21th Gen)</li>
    <li>NVIDIA</li>
    <li>Double HD Display</li>
    <li>Dolby Audio</li>
    <li>2 Warranty</li>
  </ul>
</div>
<br style="clear:both">
<hr>
<!-- 收藏区域 -->
<div>Wishlist Area</div>
<div id="wishlistContainer"></div>

CSS代码

.toggleHeart {
  background-color: rgb(253, 12, 120);
  color: white;
}
.wishlist {
  padding: 5px;
  border: 1px solid;
  cursor: pointer;
}
.card {
  float: left;
  width: 50%;
  box-sizing: border-box;
  padding: 10px;
}
/* 收藏区卡片样式 可自定义调整 */
#wishlistContainer .card {
  width: 100%;
  border: 1px solid #eee;
  margin: 5px 0;
}
/* 收藏区隐藏爱心按钮 不需要可删除该行 */
#wishlistContainer .wishlist {
  display: none;
}

JS代码

function toggleWishlist(wishBtn) {
  // 切换爱心按钮选中状态
  wishBtn.classList.toggle("toggleHeart");
  // 获取当前点击对应的卡片和唯一标识
  const currentCard = wishBtn.closest(".card");
  const cardId = currentCard.dataset.cardId;
  const wishlistContainer = document.getElementById("wishlistContainer");
  // 查找收藏区是否已有对应卡片
  const existedCard = wishlistContainer.querySelector(`[data-card-id="${cardId}"]`);

  if (existedCard) {
    // 已收藏则移除卡片
    existedCard.remove();
  } else {
    // 未收藏则克隆卡片加入收藏区
    const clonedCard = currentCard.cloneNode(true);
    wishlistContainer.appendChild(clonedCard);
  }
}

功能说明 #

• 点击卡片的Heart按钮，按钮变色的同时对应卡片会自动添加到下方收藏区
• 再次点击已选中的Heart按钮，按钮恢复初始状态，收藏区对应卡片会被移除
• 不会出现重复添加卡片的问题
• 后续新增任意卡片，仅需给新卡片设置唯一的data-card-id属性，无需修改JS代码即可复用该功能

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