jquery 放商品选择

原创

mob649e8168f1bb 2023-11-13 12:16:50 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e8168f1bb的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery放商品选择

在电商网站中，商品选择是非常重要的一部分。用户需要根据自己的需求，在众多商品中选择合适的商品。为了提升用户体验，我们可以使用jQuery来实现一个商品选择功能。

1. 页面结构

首先，我们需要创建一个HTML页面，并添加商品选择相关的HTML结构。假设我们有三个商品，每个商品都有一个复选框和商品名称。

<div id="product-list">
  <div class="product">
    <input type="checkbox" name="product" value="product1">
    <span>商品1</span>
  </div>
  <div class="product">
    <input type="checkbox" name="product" value="product2">
    <span>商品2</span>
  </div>
  <div class="product">
    <input type="checkbox" name="product" value="product3">
    <span>商品3</span>
  </div>
</div>

2. 商品选择

接下来，我们使用jQuery来实现商品选择功能。当用户选择或取消选择一个商品时，我们需要将用户选择的商品保存起来。

$(document).ready(function() {
  // 定义一个空数组来保存用户选择的商品
  var selectedProducts = [];

  // 监听商品复选框的change事件
  $('input[name="product"]').change(function() {
    var product = $(this).val();
    if ($(this).is(':checked')) {
      // 用户选择了商品，将商品添加到selectedProducts数组中
      selectedProducts.push(product);
    } else {
      // 用户取消选择商品，将商品从selectedProducts数组中移除
      var index = selectedProducts.indexOf(product);
      if (index !== -1) {
        selectedProducts.splice(index, 1);
      }
    }
  });
});

在上述代码中，我们使用了change事件监听所有商品复选框的状态变化。当用户选择一个商品时，我们将该商品的值添加到selectedProducts数组中；当用户取消选择一个商品时，我们从selectedProducts数组中移除该商品的值。

3. 商品数量和饼状图

除了保存用户选择的商品，我们还可以实时统计用户选择的商品数量，并将其以饼状图的形式展示出来。

首先，我们需要在页面中添加一个显示商品数量的元素和一个显示饼状图的元素。

<div id="product-count"></div>
<div id="product-chart"></div>

然后，我们修改商品选择的代码，以更新商品数量和饼状图。

$(document).ready(function() {
  var selectedProducts = [];

  $('input[name="product"]').change(function() {
    var product = $(this).val();
    if ($(this).is(':checked')) {
      selectedProducts.push(product);
    } else {
      var index = selectedProducts.indexOf(product);
      if (index !== -1) {
        selectedProducts.splice(index, 1);
      }
    }

    // 更新商品数量
    $('#product-count').text(selectedProducts.length);

    // 更新饼状图
    renderPieChart(selectedProducts.length);
  });

  function renderPieChart(selectedCount) {
    var totalProducts = $('input[name="product"]').length;
    var unselectedCount = totalProducts - selectedCount;

    var pieData = [
      {
        name: '已选择',
        value: selectedCount
      },
      {
        name: '未选择',
        value: unselectedCount
      }
    ];

    // 使用Mermaid语法绘制饼状图
    let pieChart = `pie
      ${pieData.map(data => `${data.name} : ${data.value}`).join('\n')}
    `;

    $('#product-chart').html(pieChart);
  }
});

在上述代码中，我们添加了一个renderPieChart函数来更新饼状图。该函数会根据用户选择的商品数量动态生成一个饼状图的数据，并使用Mermaid语法绘制饼状图。