0

私はJqueryにかなり慣れていないので、注文の「キュー」システムの設定を開始するための少しの指示が必要です。短い例が役立つでしょうが、私はより一般的な概要を探しており、私がやりたいことが可能かどうかさえ知っています：

1）アイテムを選択し、アイテムの数量を入力し、すべての修飾子を選択する「メイン」divを用意します（これはすべてテキストとチェックボックスで実行できます）。次に、[追加]ボタンをクリックすると、注文の概要（数量とアイテムの価格の合計など）が、横に「キュー」に入れられている別のdivに追加されます。

2）「追加」を押した後、「メイン」divはすべてのボックスをクリアし、別のアイテムを追加できるようにします。

3）小さなdivの「概要」をクリックして、注文アイテムを再表示する機能があります。

4

1 に答える 1

0

これはあなたが求めているものの単純化されたバージョンであり、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/

于 2013-01-29T00:47:54.230 に答える