创建订单“队列”列表

Create order "queue" list

本文关键字：列表 队列 创建      更新时间：2023-09-26

我对Jquery很陌生，需要一点指导才能开始设置订单"队列"系统。简短的例子会有所帮助，但我正在寻找更多的一般大纲，并知道我想要做的事情是否可行：

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

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

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

这是您要求的简化版本，它应该向您展示使用 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/

相关文章：