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

Question

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

我需要生成如下比较 U​​RL，最大产品可以添加为 4。

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

小提琴：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