jquerey Mobile分类购物车代码

以下是一个简单的 jQuery Mobile 分类购物车的示例代码：

HTML 代码：

<div data-role="page">
  <div data-role="header">
    <h1>分类购物车</h1>
  </div>
  <div data-role="content">
    <ul data-role="listview" data-inset="true">
      <li>
        <h2>水果</h2>
        <ul data-role="listview">
          <li>
            <a href="#" class="add-to-cart" data-name="苹果" data-price="2.99">苹果</a>
          </li>
          <li>
            <a href="#" class="add-to-cart" data-name="香蕉" data-price="1.99">香蕉</a>
          </li>
          <li>
            <a href="#" class="add-to-cart" data-name="橙子" data-price="3.99">橙子</a>
          </li>
        </ul>
      </li>
      <li>
        <h2>蔬菜</h2>
        <ul data-role="listview">
          <li>
            <a href="#" class="add-to-cart" data-name="番茄" data-price="1.49">番茄</a>
          </li>
          <li>
            <a href="#" class="add-to-cart" data-name="黄瓜" data-price="0.99">黄瓜</a>
          </li>
          <li>
            <a href="#" class="add-to-cart" data-name="胡萝卜" data-price="1.79">胡萝卜</a>
          </li>
        </ul>
      </li>
    </ul>
    <ul data-role="listview" data-inset="true" id="cart" data-filter="true" data-filter-placeholder="搜索购物车...">
      <li data-role="list-divider">购物车</li>
    </ul>
  </div>
</div>

JavaScript 代码：

$(document).on('click', '.add-to-cart', function(e) {
  e.preventDefault();
  var name = $(this).data('name');
  var price = $(this).data('price');
  var quantity = 1;

  var item = '<li><a href="#" class="remove-item" data-name="' + name + '">删除</a><h2>' + name + '</h2><p>单价：' + price + '</p><p>数量：' + quantity + '</p></li>';

  $('#cart').append(item).listview('refresh');
});

$(document).on('click', '.remove-item', function(e) {
  e.preventDefault();
  $(this).closest('li').remove();
  $('#cart').listview('refresh');
});

这个示例代码实现了一个简单的分类购物车，当用户点击某个商品时，会把商品添加到购物车中，并显示商品的名称、单价和数量。当用户想要从购物车中删除某个商品时，只需要点击商品名称后面的“删除”按钮即可。