自定义 JQuery 动态链接创建

Question

我对 js 很陌生，很难根据选择的链接找出生成自定义 url 的最佳方法。你可以在这里查看我所做的。 http://jsfiddle.net/1fz50z1y/26/ 我也会把我的信息贴在这里。

    var products = [];
    var quantity = [];
    qstring = '';


    $('input.product-radio, select.products-howmany').change(function() {
            var $this = $(this)
            var $product = $(this).closest('.product-options-left');
            var $radio = $product.find('input.product-radio');
            var $select = $product.find('select.products-howmany')
            var qid = $select.val();
            var pid = $radio.val();

            currentStatus = $radio.prop('checked'),
            theString = '';
            qString = '';
            pString = '';

        if (currentStatus) {
            products.push(pid);
            quantity.push(qid);
            if ($product.find('div.quantity').removeClass('q-hidden')) {
                //code
            }

        } else {
           products.splice(products.indexOf(pid), 1);
           quantity.splice(quantity.indexOf(qid), 1);
           $product.find('div.quantity').addClass('q-hidden');
        }

        if ((products.length > -1) || (quantity.length > -1)) {
            if ((products.length === 0) || (quantity.length === 0)) {
                console.log("Q Length: " + quantity.length);
                pString += products[0];
                qString += quantity[0];
                console.log("qString = " + quantity);

            } else {
                pString = products.join('-p');
                qString = quantity.join('_q');
                if (quantity.length > 1) {
                    qString = quantity.splice(quantity.indexOf(qid), 1);
                    pString = products.splice(products.indexOf(pid), 1);
                }
                console.log("+ Q Length: " + quantity.length);
                console.log("ADDING " + "p" + pString + "_q" + qString);

            }

            if ((qString == 'undefined') || (pString == 'undefined')) {
                $('a.options-cart').prop("href", "#");
            } else {
                //$('a.options-cart').prop("href", "/cart/add/p" + theString + "_q" + qstring + "?destination=/cart");
                //$('a.options-cart').prop("href", "/cart/add/p" + theString + "?destination=/cart");
                $('a.options-cart').prop("href", "/cart/add/p" + pString + "_q" + qString + "?destination=/cart");
            }
        }
    });

    $('a.options-cart').click(function() {
        alert(qstring);
       var $this = $(this);
       href = $this.attr('href');
       if (href == '#') {
            alert("You must select a product.");
            return false;
       }
    });

当您单击添加链接图标时，它会显示一个下拉菜单，您可以在其中选择数量。因此，更改数量也应该更新链接及其创建方式。我正在尝试弄清楚如何创建链接，以便最终结果看起来像这样。

cart/add/p123_q1?destination=/cart 这是单件商品的外观。其中 p = 产品 ID 和 q = 数量。取消单击添加到购物车应删除这些项目，更改下拉应更新数量。如果有多个项目，它应该像这样附加到链接。 cart/add/p123_q1-p234_q2-p232_q4?destination=/cart 然后在任何这些项目上取消单击或更改数量应反映链接中的更改。我不确定我是否将这一切都错了，但我一直在尝试，并且尝试了许多不同的途径来尝试达到这种效果。如果有人能帮我解决这个问题，我将不胜感激！

Answer 1

我能够使用这段代码让它正常工作。希望这可能对某人有所帮助。

$('input.product-radio, select.products-howmany').change(function () {
    var $product = $(this).closest('.product-options-left');
    var $radio = $product.find('input.product-radio');
    var $select = $product.find('select.products-howmany')

    $product.find('div.quantity').toggleClass('q-hidden', !$radio.prop('checked'));
    $product.find('label.quantity').toggleClass('q-hidden', !$radio.prop('checked'));

    var string = $('.product-radio')
        .filter(':checked')
        .map(function(){
            return $(this)
                .closest('.product-options-left')
                .find('.products-howmany')
                .val();
        })
        .get()
        .join('-');

    $('a.options-cart').prop("href", "/cart/add/" + string + "?destination=/cart");

});

    $('a.options-cart').click(function() {
        alert(qstring);
       var $this = $(this);
       href = $this.attr('href');
       if (href == '#') {
            alert("You must select a product.");
            return false;
       }
    });