Javascript 添加/删除要与Jquery进行比较的产品

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

我需要比较的网址应生成如下，最大的产品可以添加为4

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

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.");
});

$（“.more”）。单击（函数（）{
var id=$（this.next（'.ProdId'）.html（）；
$（“#容器”）.append（“+id+”）；
变量计数=$（“.box”）.length；
$（“p”）.text（“有“+计数+方框”）；
$（“#容器”）.removeClass（“隐藏”）；
});
$（“.box a”）.live（“单击”，函数（）{
$（this.parent（）.remove（）；
变量计数=$（“.box”）.length；
$（“p”）.text（“有“+计数+方框”）；
});

您需要以某种方式跟踪已选择的项目。这可能是您在添加和删除时更新的数组变量，但也可能在正在创建的

.box

元素中指示。如果将产品ID也包装在

.box

元素中的span中，则可以更轻松地定位ID：

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

更新：

我们已经建立了一种检索添加产品ID的方法，您的其他请求很容易得到满足。因为我们将重用它，所以我提取了

getselecteds

作为它自己的函数

现在，我们只需要检查它的

长度

来测试max 4要求，以及它的

索引（id）

来测试是否已经添加了项。如果是这样，代码将退出

。更多
单击listener。此时，您可以向用户显示一条错误消息

David，你能把这个例子放到小提琴上吗？对不起，我忘了jQuery自己的
.map
不返回常规数组，所以你必须
.toArray（）
它才能工作。请参阅答案中的fiddle和更新代码。谢谢David，我看到了这一点，并且工作正常。还需要一点帮助。我希望最多只能添加4个产品，不能添加重复项。嘿，David，你能建议设置最多只能添加4个产品，不能添加重复项吗？David，你能建议我为什么删除按钮不能使用jquery 2.0.2。请看这里：
$('<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('&'));