Добавить/Удалить продукты для сравнения с JQuery

Question

Я хочу добавить «функцию сравнения товаров» в список продуктов на моем сайте. Мне интересно, как я могу создать URL-адрес строки запроса на странице списка продуктов с помощью JQuery. Похоже ниже.

мне нужно сравнить 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 элементах. Если вы оберните идентификатор продукта в пролете в .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

Обновление:

Ваши дополнительные запросы легко выполняются сейчас, когда мы установили способ возврата идентификаторов добавленных продуктов. Поскольку мы будем использовать его повторно, я извлек getSelectedIds в качестве функции.

Теперь нам нужно проверить его length, чтобы проверить требование максимального 4, и его indexOf(id), чтобы проверить, был ли элемент уже добавлен. Если это так, код просто выйдет из списка прослушивания .more. Вы можете показать пользователю сообщение об ошибке в этот момент.

Updated demo