需要帮助来使用jQuery添加和删除列表中的项目

时间:2015-05-22 18:35:29

标签: javascript php jquery

我正在尝试使用以下jQuery

添加和删除带有价格计算的子项
$('.sub_item-plus-button').click( function() {
    var li_id = $(this).closest('li').attr('id');
    var productname = $('#'+li_id+' > .name').text();
    var productPrice = $('#'+li_id+' .price').text();//alert(productPrice);
    var parent_cat = $('#temp > #main_category').text();
    var price = $('#'+li_id+' .price').text();//alert(price);    
    $("#product-form").append('<input type="text" id="'+li_id+'" name="prdname[]" value="'+productname+'" />');
    $("#product-form").append('<input type="text" id="'+li_id+'" name="prdprice[]" value="'+productPrice+'" />');
    $("#product-form").append('<input type="text" id="'+li_id+'" name="prdparent[]" value="'+parent_cat+'" />');
    //$("#product-form").append('<input type="text" name="sub_category" value="'+price+'" />');
    $('li#'+li_id).append('<li id="'+li_id+'" class="extras"><span class="name">1</span><span class="price">1.00</span><span class="right"><a href="#" onclick="ri(\''+li_id+'\')" class="removeButtonLink"><span class="icon-minus-sign-empty">Re</span></a></span></li>');
    set_total_price(productPrice);      
    });

HTML是

            <ul id="sub_item">                  
            <div class="addExtrasTotal"><span>Total</span> &pound;<span class="totalPrice">0.00</span></div>
                <li id="ext1" class="popextra" style="clear: both;"><span class="column6 name">Anchovies</span>
                    <span class="column6 right">&pound; <span class="price">1.00</span>
                        <a class="button item-plus" href="JavaScript: void(0);"><span class="sub_item-plus-button">+</span></a>
                    </span>
                </li>
                <li id="ext2" class="popextra" style="clear: both;"><span class="column6 name">Artichokes</span>
                    <span class="column6 right">&pound; <span class="price">1.00</span>
                        <a class="button item-plus" href="JavaScript: void(0);"><span class="sub_item-plus-button">+</span></a>
                    </span>
                </li>
            </ul>

我需要帮助的问题是;
1.添加时,第一次添加1项,第二次添加2项而不是1次,第3次点击添加3项。
2.当移除物品时,它会一次性单击一次删除所有物品,但从总数中删除单个物品的价格,剩余的子物品价格仍然总计添加。
价格&amp;项目删除功能是;

function ri(li_id){
    //alert(li_id);
    var price = $('#'+li_id+' .price').text(); //alert(price);
    var extrass = $('#'+li_id+' .extras').html(); alert(extrass);
    $('#'+li_id+' .extras').remove();
    set_total_price_minus(price);

}

确实帮助找出问题和解决方案。

此致

1 个答案:

答案 0 :(得分:2)

问题是由于id模糊不清。您正在为$('.sub_item-plus-button').click()函数中的多个元素分配相同的id属性,因此在尝试按id选择这些元素时,jQuery会感到困惑。 id属性应该是唯一的,因此只应为单个元素分配给定的id。