使用 JQuery 向 URL 添加和删除多个数据属性

Question

花时间解决这个问题。我正在构建一个前端 WooCommerce 购物车组件，它将通过将产品 ID 传递到 URL 来将多个产品添加到购物车。 URL 结构最终将类似于 http://cleancolor.staging.wpengine.com/?add-to-cart=2998,3339,2934，其中 2998,3339,2934 是 WooCommerce 产品 ID。

这是一个实时工作版本（没有附加）http://studiorooster.com/dojo/cleancolor/ - 只需单击“5 Pack”或“10 Pack”并选择一个插件。我将产品 ID 附加到右侧列表的插件名称中，并且属性名为 data-itemid

这是我的 html 块

<div class="col-md-3 clearfix" id="order_summary_box">
    <div class="summary-box">
        <div class="heading-total">Order Summary : <span class="color-txt" id="order_total"><span>$</span>0</span>
        </div>
        <div class="summary-basic-pack">
            <h5>Whats in Your Bundle</h5>
            <ul class="entree-add" id="entree-add">
                <li id="no-entrees">No Entrees Added</li>
            </ul>
            <ul class="pack-add" id="pack-add">
                <li id="no-addons">No Addons Selected</li>
            </ul>
        </div>
        <div class="orderbtn-area">
            <div class="order-btn-cont"><a href="" class="button" id="order_btn_id"><i class="fa fa-check-circle-o" aria-hidden="true"></i> Subscribe Now !</a></div>
        </div>
    </div>
</div>

jQuery

$('#get-started').delegate('.check-opt', 'click', function () {
    let cost = '0';
    let itemname = '';
    let first = '';
    let itemid = ''
    if ($(this).is(':checked')) {
        cost = $(this).attr('data');
        itemid = $(this).attr('data-itemid');
        order_additional_options += Number(cost);
        itemname = $(this).attr('value');
        first = itemname.slice(0, itemname.indexOf(" "));
        $("#no-addons").remove();
        $(".pack-add").append("<li data-cost='" + cost + "' data-id='item_" + first + cost + "' data-itemid='" + itemid + "'>" + itemname + itemid + "</li>");
    } else { // minus unchecked value
        cost = $(this).attr('data');
        itemname = $(this).attr('value');
        first = itemname.slice(0, itemname.indexOf(" "));
        order_additional_options -= Number(cost);
        $('[data-id=item_' + first + cost + ']').remove();
    }
    cart_update();
});
// on click order button submit the form

$('#order_btn_id').on("click", function () {
    $('a').attr("href", "http://cleancolor.staging.wpengine.com/?add-to-cart=");
});

Answer 1

判断窗口是否有推送状态

查找添加到 .pack-add 中的所有元素并提取其编号

编译一个,分隔的字符串

以下以//************* 开头和结尾的部分 在下面的片段中应该可以解决问题。或许你可以将它重构为一个函数。

// add and remove check box items on summary
$('#get-started').delegate('.check-opt', 'click', function () {
    let cost = '0';
    let itemname = '';
    let first = '';
    let itemid = ''
    if ($(this).is(':checked')) {
        cost = $(this).attr('data');
        itemid = $(this).attr('data-itemid');
        order_additional_options += Number(cost);
        itemname = $(this).attr('value');
        first = itemname.slice(0, itemname.indexOf(" "));
        $("#no-addons").remove();
        $(".pack-add").append("<li data-cost='" + cost + "' data-id='item_" + first + cost + "' data-itemid='" + itemid + "'>" + itemname + itemid + "</li>");
// ********************* INSERTED CODES
        var all_values=""
    $(".pack-add").children().each(function(){
        all_values+=$(this).attr('data-itemid')+" "

})
    console.log(all_values.trim().replace(" ",","));
    var query_string="?add-to-cart="+all_values.trim().replace(/ /g,",");
    if (history.pushState) {
        var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + query_string;
        window.history.pushState({path:newurl},'',newurl);
     }
// **********************END OF NEW CODES

    } else { // minus unchecked value
        cost = $(this).attr('data');
        itemname = $(this).attr('value');
        first = itemname.slice(0, itemname.indexOf(" "));
        order_additional_options -= Number(cost);
        $('[data-id=item_' + first + cost + ']').remove();
// ********************* INSERTED CODES
        var all_values=""
    $(".pack-add").children().each(function(){
        all_values+=$(this).attr('data-itemid')+" "

})
    console.log(all_values.trim().replace(" ",","));
    var query_string="?add-to-cart="+all_values.trim().replace(/ /g,",");
    if (history.pushState) {
        var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + query_string;
        window.history.pushState({path:newurl},'',newurl);
     }

    }
    cart_update();
});