Question

我对Jquery很新，需要一点方向来开始设置订单“队列”系统。简短的例子会有所帮助，但我正在寻找一个大纲，并且知道我想要做的事情是否可能：

1）有一个“主”div，您可以在其中选择项目并输入项目的数量并选择所有修饰符（我可以使用文本和复选框完成所有这些操作）。然后单击“添加”按钮，它会将订单摘要（可能是数量和项目总价）添加到另一个“排队”到一边的div。

2）点击“添加”后，“主”div将清除所有框，并允许我添加另一个项目。

3）能够点击小div中的“摘要”并重新显示订单项。

Answer 1

以下是您要求的简化版本，应该向您展示使用jQuery从页面获取值的基础知识：

HTML：

Select a Product: <select id="product">
    <option>Photoshop CS6</option>
    <option>Photoshop Elements</option>
    <option>iPhoto</option>
</select><br>
Digital Download <input id="digitalDownload" class="options" type="checkbox"><br>
Student Discount <input id="studentDiscount" class="options" type="checkbox"><br>
<br>
<button id="add">Add to Order</button><br>
<br>
<div id="summary"></div>

使用Javascript：

$("#add").click(function() {
    // gather current order info
    var order = [];
    order.push($("#product").val());
    order.push("Digital Download: " + $("#digitalDownload").prop("checked"));
    order.push("Student Discount: " + $("#studentDiscount").prop("checked"));
    // put order info into summary
    $("#summary").append("<div>" + order.join(", ") + "</div>");
    // clear previous checked values
    $(".options").prop("checked", false);
});

此处的演示演示：http://jsfiddle.net/jfriend00/Rjmbx/

创建订单“队列”列表

1 个答案: