0

そこで、商品を追加すると同時に、ショッピング カートの合計金額を更新したいと考えています。

$(".articel input[type='button']").click(function() {                   
    var price = $(this).siblings("input[name='price']").attr("value");
    var quantity = $(this).siblings("input[type='number']").attr("value");

    if (quantity % 1 != 0) {
        alert("You must add a whole number");
    }
    else if (quantity <= 0) {
        alert("You can not add a negative number or nothing");
    }
    else {
        var name = $(this).siblings("input[name='prodname']").attr("value");
        var ul = document.getElementById("buylist"); 
        var totalprice = quantity * price;
        var prod = name + " x " + quantity + "= " + totalprice + "$";
        var el = document.createElement("li"); 
        el.innerHTML = prod; 
        ul.appendChild(el); 
    }
});
});

製品と合計価格が追加される場所は次のとおりです。

<h4>Shopping Cart</h4>
<div id="buylist">
    <ul>
    </ul>
    <div id="totalprice">
        <h4>Total price:<h4>
    </div>
</div>

<a href="#checkout" onClick="checkOut()" class="click" data-toggle="tab" id="form">Checkout</a>
</div>

そして、ここに商品をカートに追加するフォームの 1 つがあります

<form class="articel">
    Quantity: <input type="number" style="width:30px;"><br>
    Add to cart: <input type="button" class="btn">
    <input type="hidden" value="30" name="price">
    <input type="hidden" value="The walking dead" name="prodname">
</form>
4

2 に答える 2

2

たぶん、私は本当に理解していません。しかし、製品またはその数量が変わると、価格を計算する必要があります。これらの両方のアクションのイベントが既にあることをお勧めします。次に、価格を計算する関数を実行します。

ここで、すでに固定価格を持っているか、それを数量で乗算する必要があるかによって異なります. 製品をループして価格を計算します。

注: 価格と数量を選択するために、実際にはコードにないセレクターを使用しました。

function calculatePrice() {
    var quantity, price, sum = 0;
    //loop through product "blocks"
    $('.articel').each(function() {
        price = $(this).children('.price').val();
        quantity = $(this).children('.quantity').val();
        //Add price to sum if number
        if (!isNaN(price) && !isNaN(quantity)) {
            sum += price * quantity;
        }
    });
    //Update Price
    $('#totalprice').html('<h4>Total price:' + sum + '</h4');
}
于 2012-11-16T14:33:31.633 に答える
0

価格と数量を UL に追加すると、簡単に処理できます。

<ul>
  <li data-quantity="X" data-price="Z">...</li>
</ul>

この関数を JavaScript ファイルに追加します。

function calcTotal (ul) {
  var newTotal = 0;
  ul.find('li').each( function(i,e) {
    var li = $(e);
    newTotal += li.data('quantity') * li.data('price');
  });
}

次に、最後のelseがあるコードで：

itemPrice = quantity * price;
var prodDesc = name + " x " + quantity + "= " + itemPrice + "$";//same as it was.
var newLi = $("<li>");
newLi.text(prodDesc).data('quantity', quantity).data('price', price);
ul.append(newLi);
var totalPrice = calcTotal(ul);
$('#totalprice h4').text('Total Price: ' + totalPrice);

多かれ少なかれそれだけです。

于 2012-11-16T14:17:09.997 に答える