当前位置：首页 > 文章列表 > 文章 > 前端 > 购物车空状态与商品切换实现方法

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

2025-11-04 15:00:52 0浏览收藏

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

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>元素（包括表头、表尾或剩余商品），则商品列表表格保持显示
}

代码解析：

删除商品行： urunsilme函数首先通过事件对象event.target找到被点击的删除按钮，然后逐级向上找到对应的元素，并将其从DOM中移除。
获取行数： document.querySelectorAll('#sepettablo tr') 用于获取id为sepettablo的表格中所有元素的NodeList。
条件判断与切换：
- 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; /* 关键：默认隐藏 */
}
/* ... 其他相关样式 ... */

注意事项与最佳实践

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

如果您的意图是：只有当所有商品数据行都被删除，但表头和表尾可能依然存在时，就显示空购物车信息。 那么您需要调整rowCount的计算方式，使其只统计实际的商品数据行。例如，如果商品数据行都在中，可以使用 document.querySelectorAll('#sepettablo tbody tr').length。如果数据行直接在下且没有，但您可以区分表头和表尾，可以使用更复杂的选择器，如 document.querySelectorAll('#sepettablo tr:not(:first-child):not(.toplam)').length 来排除表头和总计行。

本教程的示例代码遵循了原始问题答案的逻辑，即只有当整个表格完全没有

时才切换。如果您的需求是当商品数据行为0时切换，请务必修改rowCount的获取逻辑。

页面初始加载状态处理： 上述JavaScript逻辑只在删除商品时触发。在页面首次加载时，如果购物车本身就为空，#sepettablo应该被隐藏，而.sepetbos应该显示。这可以通过在页面加载完成后（例如在DOMContentLoaded事件中）执行一次相同的检查逻辑来实现：

document.addEventListener('DOMContentLoaded', function() {
  var initialRowCount = document.querySelectorAll('#sepettablo tr');
  // 假设您的HTML在初始加载时，如果购物车为空，则#sepettablo中除了表头表尾没有其他行
  // 或者根据您实际的“空”状态定义来调整判断
  if (initialRowCount.length <= 2) { // 假设只剩表头和表尾时视为空
    document.querySelector('#sepettablo').style.display = "none";
    document.querySelector('.sepetbos').style.display = "table";
  } else {
    document.querySelector('#sepettablo').style.display = "table";
    document.querySelector('.sepetbos').style.display = "none";
  }
});

事件处理： 在urunsilme函数中，event对象是隐式可用的。在现代JavaScript中，更推荐将event作为参数显式传递，例如onclick="urunsilme(event)"，并在函数定义中接收：function urunsilme(e)，然后使用e.target。

用户体验优化： 为了使表格切换更加平滑，可以考虑使用CSS的transition属性为display或opacity等属性添加过渡效果，但display属性本身不支持平滑过渡，通常需要结合opacity和visibility或使用max-height等技巧。

总结

通过上述JavaScript和CSS的配合，我们可以轻松实现电商购物车页面中商品列表与空购物车提示的动态切换。关键在于精确地统计商品数据行数，并在每次用户操作后根据行数变化更新表格的显示状态。这种方法不仅提升了用户界面的交互性，也使得页面内容更加符合用户的预期，从而优化了整体购物体验。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~

阿里邮箱官网登录入口及手机登录方法

上一篇: 阿里邮箱官网登录入口及手机登录方法

下一篇: inline-block与float布局区别详解

查看更多

最新文章

文章 · 前端 | 2分钟前 |

CSS浮动溢出父容器怎么解决

306浏览收藏
文章 · 前端 | 8分钟前 |

ReactDND获取拖拽位置技巧

249浏览收藏
文章 · 前端 | 17分钟前 |

JS动态加载图片表单提交后不显示怎么解决

366浏览收藏
文章 · 前端 | 24分钟前 | html 实时通信事件监听客户端连接 Socket.io

HTMLSocket.io实时通信入门教程

437浏览收藏
文章 · 前端 | 27分钟前 | html文件 eclipse 配置外部浏览器运行HTML

Eclipse运行HTML文件步骤详解

499浏览收藏
文章 · 前端 | 28分钟前 |

CSStransition如何在Flex布局中应用

171浏览收藏
文章 · 前端 | 38分钟前 |

Node.js中如何操作Cookie详解

342浏览收藏
文章 · 前端 | 43分钟前 |

创建简单HTML网页的步骤详解

195浏览收藏
文章 · 前端 | 47分钟前 |

Select2下拉联动清空方法解析

393浏览收藏
文章 · 前端 | 47分钟前 |

AST代码生成器工具推荐及使用技巧

130浏览收藏
文章 · 前端 | 48分钟前 |

HTML表格th标签实用技巧分享

495浏览收藏
文章 · 前端 | 50分钟前 | 响应式 CSS布局 FLEXBOX Grid 图片画廊

Flex与Grid结合打造图片画廊布局教程

208浏览收藏

查看更多

课程推荐

前端进阶之JavaScript设计模式

设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。

543次学习
GO语言核心编程课程

本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。

516次学习
简单聊聊mysql8与网络通信

如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让

500次学习
JavaScript正则表达式基础与实战

在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。

487次学习
从零制作响应式网站—Grid布局

本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。

485次学习

查看更多

AI推荐

ChatExcel酷表

ChatExcel酷表是由北京大学团队打造的Excel聊天机器人，用自然语言操控表格，简化数据处理，告别繁琐操作，提升工作效率！适用于学生、上班族及政府人员。

3178次使用
Any绘本

探索Any绘本（anypicturebook.com/zh），一款开源免费的AI绘本创作工具，基于Google Gemini与Flux AI模型，让您轻松创作个性化绘本。适用于家庭、教育、创作等多种场景，零门槛，高自由度，技术透明，本地可控。

3389次使用
可赞AI

可赞AI，AI驱动的办公可视化智能工具，助您轻松实现文本与可视化元素高效转化。无论是智能文档生成、多格式文本解析，还是一键生成专业图表、脑图、知识卡片，可赞AI都能让信息处理更清晰高效。覆盖数据汇报、会议纪要、内容营销等全场景，大幅提升办公效率，降低专业门槛，是您提升工作效率的得力助手。

3418次使用
星月写作

星月写作是国内首款聚焦中文网络小说创作的AI辅助工具，解决网文作者从构思到变现的全流程痛点。AI扫榜、专属模板、全链路适配，助力新人快速上手，资深作者效率倍增。

4523次使用
MagicLight

MagicLight.ai是全球首款叙事驱动型AI动画视频创作平台，专注于解决从故事想法到完整动画的全流程痛点。它通过自研AI模型，保障角色、风格、场景高度一致性，让零动画经验者也能高效产出专业级叙事内容。广泛适用于独立创作者、动画工作室、教育机构及企业营销，助您轻松实现创意落地与商业化。

3797次使用