登录
首页 >  文章 >  前端

购物车空状态与商品切换实现方法

时间：2025-11-04 15:00:52 363浏览 收藏

大家好，我们又见面了啊~本文《购物车空状态与商品列表切换实现》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

JavaScript实现购物车空状态与商品列表的动态切换

本教程详细阐述了如何通过JavaScript动态管理电商网站购物车页面的显示逻辑。当购物车中有商品时展示商品列表表格，而当商品数量为零时则隐藏商品列表并显示“购物车为空”的提示表格。核心方法是监听商品删除事件，在每次删除后检查商品表格的行数，并据此切换两个表格的可见性，从而优化用户体验。

引言：动态购物车界面的必要性

在现代电商网站中，购物车页面是用户体验的关键环节。一个良好的购物车界面应该能够根据用户的操作（如添加、删除商品）实时更新其内容和布局。当购物车中有商品时，通常会显示一个包含商品详情、数量、价格等的表格；而当购物车为空时，则应友好地提示用户添加商品，而不是显示一个空荡荡的表格。这种动态切换显示的需求，可以通过JavaScript有效地实现。

HTML结构概览

为了实现上述动态切换，我们通常需要准备两套HTML结构：一套用于展示有商品的购物车，另一套用于展示空购物车。

假设我们的HTML结构如下：

<div class="sepet">
  <!-- 商品列表表格 -->
  <table id="sepettablo" align="center" class="roundedCorners">
    <thead>
      <tr>
        <th>Ürün</th>
        <th>Açıklama</th>
        <th>Adet</th>
        <th>Birim Fiyatı</th>
        <th>Fiyat</th>
      </tr>
    </thead>
    <tbody>
      <!-- 商品数据行将动态添加或删除 -->
      <tr>
        <td><img src="images\5.jpg" style="height:100px;" alt="Alternate Text" /></td>
        <td id="aciklama"><span class="opener" style="cursor:pointer;">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span></td>
        <td><i style="cursor:pointer;" onclick="arttir()" class="fa-solid fa-circle-plus"></i> &lt;input type=&quot;button&quot; id=&quot;sonuc&quot; value=&quot;1&quot; /&gt; <i onclick="azalt()" style="cursor:pointer;" class="fa-solid fa-circle-minus"></i> <i style="cursor:pointer;" class="fa-solid fa-trash-can"
            onclick="urunsilme()"></i></td>
        <td>
          <span class="shop-price" style="cursor:default">129.99 TL</span>
        </td>
        <td>4</td>
      </tr>
      <!-- 更多商品行... -->
    </tbody>
    <tfoot>
      <tr class="toplam">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>
          <td><i style="cursor:pointer;" onclick="arttir()" class="fa-solid fa-circle-plus"></i> &lt;input type=&quot;button&quot; id=&quot;sonuc&quot; value=&quot;1&quot; /&gt; <i onclick="azalt()" style="cursor:pointer;" class="fa-solid fa-circle-minus"></i> <i style="cursor:pointer;" class="fa-solid fa-trash-can"
              onclick="urunsilme()"></i></td>
          <td>Toplam:</td>
          <td>&nbsp;</td>
      </tr>
    </tfoot>
  </table>

  <!-- 购物车为空时的提示表格 -->
  <table class="sepetbos" align="center">
    <tbody>
      <tr>
        <td><span>Sepetiniz boş. Ürün eklemek ister misiniz?</span></td>
      </tr>
    </tbody>
  </table>
</div>

在这个结构中：

  • #sepettablo 是用于显示商品列表的主表格。
  • .sepetbos 是当购物车为空时显示的提示表格。

为了在页面加载时正确显示，通常会在CSS中将空购物车表格默认隐藏：

table.sepetbos {
  /* ... 其他样式 ... */
  display: none; /* 初始状态隐藏 */
}

JavaScript实现：动态切换逻辑

核心逻辑在于，每次用户从购物车中删除商品时，我们需要检查当前商品表格中剩余的商品数量。如果商品数量为零，则隐藏商品列表表格并显示空购物车提示表格；否则，保持商品列表表格的显示。

我们将修改现有的urunsilme（删除商品）函数来实现这一功能。

function urunsilme(event) {
  // 1. 获取并删除当前商品行
  var td = event.target.parentNode;
  var tr = td.parentNode;
  tr.parentNode.removeChild(tr);

  // 2. 检查商品表格中的剩余行数
  // 注意：这里我们获取的是整个表格中所有的<tr>元素。
  // 如果您的表格包含<thead>和<tfoot>，并且您只想计算商品数据行，
  // 则需要调整选择器，例如使用 '#sepettablo tbody tr'。
  // 在本例中，我们将按照原始问题答案的逻辑，检查所有<tr>元素的数量。
  var rowCount = document.querySelectorAll('#sepettablo tr');

  // 3. 根据行数判断并切换表格显示状态
  if (rowCount.length === 0) {
    // 如果没有剩余的<tr>元素，隐藏商品列表表格
    document.querySelector('#sepettablo').style.display = "none";
    // 显示空购物车提示表格
    document.querySelector('.sepetbos').style.display = "table";
  }
  // 如果还有<tr>元素（包括表头、表尾或剩余商品），则商品列表表格保持显示
}

代码解析：

  1. 删除商品行： urunsilme函数首先通过事件对象event.target找到被点击的删除按钮，然后逐级向上找到对应的元素，并将其从DOM中移除。
  2. 获取行数： document.querySelectorAll('#sepettablo tr') 用于获取id为sepettablo的表格中所有元素的NodeList。
  3. 条件判断与切换：
    • if (rowCount.length === 0)：判断获取到的元素数量是否为0。
    • 如果为0，说明表格中已没有任何行（包括表头和表尾），此时将#sepettablo的display样式设置为"none"来隐藏它，并将.sepetbos的display样式设置为"table"来显示空购物车提示。"table"是表格元素的默认display值。

CSS辅助设置

如前所述，为了确保初始状态的正确性，以及在JavaScript切换时能正确显示，.sepetbos表格应在CSS中默认隐藏。

/* 购物车商品列表表格样式 */
table.roundedCorners {
  border: 1px solid DarkOrange;
  border-radius: 13px;
  border-spacing: 1px;
  margin-top: 20px;
  font-size: 25px;
  width: 80%;
  max-width: 1440px;
  text-align: center;
}
/* ... 其他相关样式 ... */

/* 购物车为空提示表格样式 */
table.sepetbos {
  border: 1px solid DarkOrange;
  border-radius: 13px;
  border-spacing: 1px;
  margin-top: 20px;
  font-size: 25px;
  width: 80%;
  max-width: 1440px;
  text-align: center;
  display: none; /* 关键：默认隐藏 */
}
/* ... 其他相关样式 ... */

注意事项与最佳实践

  1. 行数统计的精确性： 在提供的HTML示例中，#sepettablo包含一个（表头行）和一个（总计行，.toplam）。如果document.querySelectorAll('#sepettablo tr').length === 0为真，意味着整个表格中没有任何元素，包括表头和表尾。