jquery实现商品sku多属性选择功能（商品详情页）

为了实现商品sku多属性选择功能，我们可以采用以下步骤：

1.准备工作

在html代码中，需要添加一些标签和属性，包括商品属性选择区域的class，属性选项的class和data-属性等信息。

在jquery代码中，需要定义商品属性数据、价格数据等，以及选择商品属性时的事件响应函数。

2.实现选择商品属性的功能

在jquery代码中，需要实现选择商品属性时的事件响应函数，更新价格、库存等信息。具体实现方式可以采用两种方法：

（1）通过遍历所有属性选项，判断哪些属性选项被选中，然后更新价格、库存等信息。

$('.sku-group-item ul li').on('click', function() {
  $(this).addClass('selected').siblings().removeClass('selected');
  var selected = $('.sku-group-item').find('li.selected');
  var sku = '';
  selected.each(function() {
    sku += $(this).data('attr') + '|';
  });
  sku = sku.slice(0, -1);

  //更新价格等信息
  var price = goods[sku]['price'];
  var stock = goods[sku]['stock'];
  $('.sku-price').html(price);
  $('.sku-stock em').html(stock);
});

（2）将所有属性选项的点击事件委托给他们的父元素，通过父元素的事件响应函数判断选中的属性选项，然后更新价格、库存等信息。

$('.sku-group-item').on('click', 'li', function() {
  $(this).addClass('selected').siblings().removeClass('selected');
  var selected = $('.sku-group-item').find('li.selected');
  var sku = '';
  selected.each(function() {
    sku += $(this).data('attr') + '|';
  });
  sku = sku.slice(0, -1);

  //更新价格等信息
  var price = goods[sku]['price'];
  var stock = goods[sku]['stock'];
  $('.sku-price').html(price);
  $('.sku-stock em').html(stock);
});

3.完整示例说明

（1）html代码

<div class="sku-group-item">
  <div class="sku-group-title">颜色：</div>
  <ul>
    <li data-attr="{&quot;color&quot;:&quot;red&quot;}">红色</li>
    <li data-attr="{&quot;color&quot;:&quot;blue&quot;}">蓝色</li>
  </ul>
</div>
<div class="sku-group-item">
  <div class="sku-group-title">尺码：</div>
  <ul>
    <li data-attr="{&quot;size&quot;:&quot;S&quot;}">S</li>
    <li data-attr="{&quot;size&quot;:&quot;M&quot;}">M</li>
    <li data-attr="{&quot;size&quot;:&quot;L&quot;}">L</li>
  </ul>
</div>
<div class="sku-price">0</div>
<div class="sku-stock">库存：<em>0</em></div>

（2）jquery代码

var goods = {
  "red|S": {
    "price": "100",
    "stock": "10"
  },
  "red|M": {
    "price": "120",
    "stock": "20"
  },
  "red|L": {
    "price": "150",
    "stock": "30"
  },
  "blue|S": {
    "price": "80",
    "stock": "5"
  },
  "blue|M": {
    "price": "90",
    "stock": "10"
  },
  "blue|L": {
    "price": "100",
    "stock": "15"
  }
}

$('.sku-group-item').on('click', 'li', function() {
  $(this).addClass('selected').siblings().removeClass('selected');
  var selected = $('.sku-group-item').find('li.selected');
  var sku = '';
  selected.each(function() {
    sku += $(this).data('attr') + '|';
  });
  sku = sku.slice(0, -1);

  //更新价格等信息
  var price = goods[sku]['price'];
  var stock = goods[sku]['stock'];
  $('.sku-price').html(price);
  $('.sku-stock em').html(stock);
});