Question

我对js很新，并且很难找到生成自定义网址的最佳方式，具体取决于所选的链接。你可以看看我在这里做了什么。 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;
       }
    });

自定义JQuery动态链接创建

1 个答案: