添加/删除产品以与Jquery进行比较 [英] Add/Remove Products to Compare with Jquery

问题描述

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

I want to add "product compare feature" in my website product list. I am wondering how can i make a Query String URL from product list page using Jquery. Looks like below one.

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

I need compare URL should be generated like below, and maximum product can be added as 4

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

小提琴： http://jsfiddle.net/taxjD/341/

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

I can handle these query string parameter on compare.html page.

<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：

You need to somehow keep track of the items that have been selected. That could be an array variable that you updated both on add and remove, but it could also be indicated in the .box elements you're creating. If you wrap the product ID in a span in the .box elements as well, you'll have an easier time targeting the 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 作为它自己的函数。

Your additional requests are easily fulfilled now that we've established a way of retreiving the added products' IDs. Since we'll be reusing it, I've extracted getSelectedIds as a function of its own.

现在我们只需检查其长度以测试最大4要求，并检查其 indexOf（id）以测试该项目已经添加了。如果是这样，代码将退出 .more 点击监听器。您可以在此时向用户显示错误消息。

Now we just need to check its length to test the max 4 requirement, and its indexOf(id) to test whether the item was already added. If so, the code will just exit the .more click listener. You could show the user an error message at that point.

已更新演示

这篇关于添加/删除产品以与Jquery进行比较的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！