javascript - 添加/删除产品以与 Jquery 进行比较

Question

我想在我的网站产品列表中添加“产品比较功能”。我想知道如何使用 jQuery 从产品列表页面创建查询字符串 URL。如下图所示。

我需要生成比较 URL，如下所示，最大产品可以添加为 4。

<a href="Compare.html?P1=123&P2=124&P3=125&P4=126">Compare Products</a>

fiddle :http://jsfiddle.net/taxjD/341/

我可以在 compare.html 页面上处理这些查询字符串参数。

<div id="container" class="hidden">
    <p>There are 0 boxes</p>  
    **<a href="\compare.html?P1=123&P2=124&P3=125&P4=126">Compare</a>**
</div>
<div>
    <div>
        <h1>Product Name 1</h1>
        <a href="#" class="more"> + Add to compare</a>
        <span class="ProdId">123</span>
    </div>
    <div>
        <h1>Product Name 2</h1>
        <a href="#" class="more"> + Add to compare</a>
        <span class="ProdId">124</span>
    </div>
    <div>
        <h1>Product Name 3</h1>
        <a href="#" class="more"> + Add to compare</a>
        <span class="ProdId">125</span>
    </div>
</div>

Jquery

$(".more").click(function() {
    var id=$(this).next('.ProdId').html();
    $("#container").append("<div class='box'> "+ id + "<a href='#'>x</a></div>");
    var count = $(".box").length;
    $("p").text("There are " + count + " boxes.");
    $("#container").removeClass("hidden");
});

$(".box a").live("click", function() {
    $(this).parent().remove();
    var count = $(".box").length;
    $("p").text("There are " + count + " boxes.");
});

Answer 1

您需要以某种方式跟踪已选择的项目。这可能是您在添加和删除时更新的数组变量，但也可能在您创建的 .box 元素中指示。如果您也将产品 ID 封装在 .box 元素中的范围内，您将可以更轻松地定位 ID:

$('<div/>', { 'class': 'box' })
   .append($('<span/>', { class: 'prod-id', text: id }))
   .append($('<a/>', { href: '#', text: 'x' }))
   .appendTo('#container');

然后你可以这样做:

var ids = $('.box .prod-id')
             .map(function(i, x) { return ['P', ++i, '=', $(this).text()].join(''); })
             .toArray();

$('#container > a').attr('href', 'Compare.html?' + ids.join('&'));

Demo

更新:

既然我们已经建立了一种检索添加产品 ID 的方法，您的额外请求就可以轻松满足。由于我们将重用它，因此我将 getSelectedIds 提取为它自己的函数。

现在我们只需要检查它的length来测试最大4的要求，并检查它的indexOf(id)来测试该项目是否已经添加。如果是这样，代码将退出 .more 点击监听器。此时您可以向用户显示一条错误消息。

Updated demo