使用 jQuery 将项目附加到列表，但如果使用 Javascript 项目相同则使用索引

Question

我知道的一种星云主题。

我在 Javascript 中有一个 "cart" 构建。我的例子是 JSFIDDLE.

在我的示例中，HTML 输出的左列中有一个输入框列表，由“+”和“-”按钮控制。值相应增加和减少。
在右栏中，值受左侧输入内容的限制。这是 'Product'
在输出的底部，您将看到 "Cart"。我正在根据 'Product' 选择将项目附加到 "Cart"。

我希望如果 'Product' 项相似，那么我只需要输出索引或数量，就像购物车一样。所以在我的例子中，如果购物车中有 2 个相同的产品，请将 2 个的数量放在列表项的旁边。

 var increment;
 var $InputValue = $('.ProductDetailPage').find("input[data-attendee='" + gaData + "']");
 $InputValue.each(function (index) {
     var oldThisVal = $(this).attr("value");
     var newThisVal = oldThisVal;
     var newBoxValInc = parseFloat(oldThisVal) + 1;
     var newBoxValDec = parseFloat(oldThisVal) + 1;
     var parentSection = $(this).parents("section").attr("id"),
         productname = $(this).parents("section").find('h2').text(),
         $list = $(this).parents("section").find(".CartList ul"),
         //[data-attendee='" + gaData + "']
         attendee = $(this).data("attendee"),
         attendeeprice = $(this).data("attendeeprice"),

         li = '<li class="animated bounceIn ' + attendee + parentSection + ' item' + $(this).val() + '"><span class="itemName">' + productname + '</span><span class="attendeeType"> ' + attendee + '</span><span class="itemPrice"> $' + attendeeprice + '</span></li>';

     if ($button.text() == "+") {
         increment = true;
     } else {
         increment = false;
     }


     if ($(this).val() > 0 && increment == true) {
         $list.append(li);
         var listItemsCount = li.length;
     } else {
         $list.find("li." + attendee + parentSection).last().remove();
     }

编辑：添加了对所需输出的解释 所以我现在上面的代码只将项目附加到列表中，如下所示：

Adult Ticket
Junior Ticket
Junior Ticket
Junior Ticket

我想要的效果是：

1 - Adult Ticket
3 - Junior Ticket

我问这个问题是因为我不知道根据我已有的从哪里开始。我正在附加到列表中，但我不知道如何只添加一次项目，然后如果有多个相同的项目只在列表项目之前递增一个数字。

提前致谢。

Answer 1

现在编辑一切正常

演示：JSFIDDLE

我在使用 listItemsCount 时遇到了一些问题（而且我不了解该实用程序）。但是，考虑到字符串attendee + parentSection的唯一性，我在li（初始等于1）中添加了一个data-qtaattribute。
时您单击按钮，脚本检查 class 是否已经存在，如果为假，它会检索数据 qta 和一些东西（检查 qta，如果为零则删除，更新 qta 和数字），否则它会添加一个新的 li

var sectionClass=$button.parent().parent().parent().parent().parent().parent().hasClass('ProductDetailPage'),
    element = $list.children('li.' + attendee + parentSection),
    qta = parseInt(element.attr('data-qta')),
    relatedInput=$('.ProductDetailPage').find('input[data-attendee="' + attendee+'"]');

    if(sectionClass==false ){
        qta = parseInt(relatedInput.val());
        if(qta>newVal){
            relatedInput.val(newVal);
            qta=newVal+1;
            sectionClass=true;
        }
    }

    if(sectionClass){
         if($list.children('li.' + attendee + parentSection).length > 0) {

            ($button.text() == "+")? qta++:qta--; 
            if (qta > 0) {
                element.attr('data-qta', qta);
                element.children('.itemPrice').html(attendeeprice + ' x ' + qta);
            } else {
                element.remove();
            }
         } else {
             var li = '<li class="animated bounceIn ' + attendee + parentSection + ' item' + $(this).val() + '" data-qta="1"><span class="itemName">' + productname + '</span><span class="attendeeType"> ' + attendee + '</span><span class="itemPrice"> $' + attendeeprice + '</span></li>';
             $list.append(li);
         }
         calculateCart();
    }

使用 jQuery 将项目附加到列表，但如果使用 Javascript 项目相同则使用索引

Appending items to a list using jQuery but use index if items are the same using Javascript

javascript

jquery