使用JQuery将多个数据属性附加到URL并将其删除

时间:2017-04-04 02:28:05

标签: javascript jquery dom

有凝灰岩时间搞清楚这一点。我正在构建一个前端WooCommerce购物车组件,它会通过将产品ID传递到URL来将多个产品添加到购物车。网址结构最终看起来像http://cleancolor.staging.wpengine.com/?add-to-cart=2998,3339,2934,其中2998,3339,2934是WooCommerce产品ID。

这是一个实时工作版本(没有追加)http://studiorooster.com/dojo/cleancolor/ - 只需点击“5包”或“10包”并选择一个插件即可。我将产品ID附加到右侧列表的Addon名称,并具有名为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=");
});

1 个答案:

答案 0 :(得分: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();
    });