javascript - 追加购物车，如何对某些商品打折？

Question

我有一个复选框购物车，我想知道是否可以使用 append() 函数对某些商品进行折扣？就像我有一个选项可以将特定项目从基本升级到高级，但我不希望折扣应用于该特定项目。

我有一个额外的问题，在附录中每个项目都带有数量框，如何排除某些项目以没有数量框而只有一些文本？

fiddle here

function buildCart(checked) {
    // This one just builds the sidebar on demand. Quite useful if cart contents can be
    // updated many ways (eg in another tab).
    $("#cart_items").empty();

    $('#total').html('0 €'); //default price for your cart
    var cart_total = 0; //default (because your cart shows 10)


    //For each checked item, add a sidebar element
    for (var i = 0; i < checked.length; i++) {
        //build cart item as appropriate.
        var newItem = $("<div>");
        var checkbox = $("input[name='" + checked[i] + "']");
        $test1 = checkbox.parent('td').siblings('td').html(); // check this, you'll have the item name. (the first td)
        $test2 = checkbox.attr('data-val'); // this will have the value on the "data-val" attribute on your checkbox


        cart_total += parseInt($test2); //add the data-val to the cart_total
        newItem.append('<table cellspacing="2" cellpadding="0" border="0" width="320"><tr> <td width="170" valign="top" align="left"> <div class="product_name">' + $test1 + '</div> </div> </td> <td width="30" valign="top" align="center"> <input type="text" class="quantity" value="1" maxlength="2" /> </td> <td width="70" valign="top" align="center"> <div class="product_total_cost price" data-val="' + $test2 + '">' + $test2 + ' €</div> </td> <td width="9" valign="top" align="right"> <div class="remove_product">X</div> </td> </tr> </table>');

        /*************************/
        var discount_pct = parseInt($(".discount").data("val"), 25);
        var discount = -(cart_total * discount_pct / 100);

        $('.discounted').text('- ' + -discount + ' €');
        $('#total').html(cart_total + discount + " €"); //show this value as the total


        $("#cart_items").append(newItem); 
    }
}

HTML

<table cellspacing="2" cellpadding="0" border="0" width="307">
    <tr>
        <td width="190" valign="top" align="left">
            <div class="discount" data-val="10">Discount</div>
        </td>
        <td width="70" valign="top" align="center">
            <div class="discounted" data-val="25">- 0 €</div>
        </td>
    </tr>
</table>

Answer 1

这是一个数据结构问题。

首先，您需要区分哪些产品符合折扣资格，哪些产品不符合折扣资格。您还必须区分可以编辑数量的产品和不能编辑数量的产品。

目前，您的所有输入如下所示:

<input type="checkbox" name="gold_package" value="Gold package" data-val="40" />

我首先添加一个 data-product-type 属性来设置产品类型是“折扣”还是“升级”。

在您的脚本中，您必须将 discount 类型的值推送到与 upgrade 类型不同的数组中。您还可以将项目类型升级设置为没有数量框。

您的购物车总额将为 (discount[]*%) + (upgrade[])。我希望它有帮助。