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

Add/Remove Products to Compare with Jquery

本文关键字：比较 Jquery 删除 添加      更新时间：2023-09-26

我想添加"产品比较特征"；在我的网站产品列表中。我想知道如何使用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.");
});

您需要以某种方式跟踪已选择的项目。这可能是您在添加和删除时更新的数组变量，但也可能在您正在创建的.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('&'));

演示

更新：

既然我们已经建立了一种检索添加产品ID的方法，您的额外请求就很容易得到满足。由于我们将重用它，所以我提取了getSelectedIds作为它自己的函数。

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

更新的演示

相关文章：