jquery 商品对比

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。商品对比功能通常用于电子商务网站，允许用户比较不同商品的特性、价格等信息。

类型

静态对比：在页面上显示多个商品的详细信息，用户可以通过视觉进行对比。
动态对比：用户可以选择要对比的商品，系统会动态生成对比表格，显示所选商品的详细信息。

应用场景

电子商务网站：用户可以比较不同商品的价格、规格、功能等。
产品展示页面：用户可以对比不同产品的特点，帮助他们做出购买决策。

示例代码

以下是一个简单的 jQuery 商品对比示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品对比</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .product {
            margin: 10px;
            padding: 10px;
            border: 1px solid #ccc;
        }
        .comparison-table {
            border-collapse: collapse;
            width: 100%;
        }
        .comparison-table th, .comparison-table td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        .comparison-table th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <div class="product" data-id="1">
        <h3>商品A</h3>
        <p>价格: $100</p>
        <p>规格: 10GB</p>
        <button class="compare-btn">对比</button>
    </div>
    <div class="product" data-id="2">
        <h3>商品B</h3>
        <p>价格: $150</p>
        <p>规格: 20GB</p>
        <button class="compare-btn">对比</button>
    </div>

    <table class="comparison-table" id="comparison-table">
        <thead>
            <tr>
                <th>商品</th>
                <th>价格</th>
                <th>规格</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    <script>
        $(document).ready(function() {
            $('.compare-btn').click(function() {
                var productId = $(this).closest('.product').data('id');
                var productName = $(this).closest('.product').find('h3').text();
                var productPrice = $(this).closest('.product').find('p:contains("价格")').text().replace(/[^0-9.]/g, '');
                var productSpec = $(this).closest('.product').find('p:contains("规格")').text().replace(/[^0-9a-zA-Z]/g, '');

                var tableRow = '<tr><td>' + productName + '</td><td>' + productPrice + '</td><td>' + productSpec + '</td></tr>';
                $('#comparison-table tbody').append(tableRow);
            });
        });
    </script>
</body>
</html>