使用jQuery計算每個函數內的兩個數字

Question

我是 JS 和 jQuery 新手，遇到了一個無法解決的問題。

我有 3 個按鈕，每個按鈕都有 2 個數字，一個是數量，另一個是價格。

如何通過單擊每個按鈕的乘法獲得正確的新價格？

我的代碼：

 let topSalePrice = $("#topSalePrice"); let topRegPrice = $("#topRegPrice"); let quantity = $(".quantity"); let price = $(".price"); let button = $(".button") topSalePrice = topSalePrice.text().substr(0, topSalePrice.text().indexOf('€')); topSalePrice = topSalePrice.replace(/,/g, '.'); price.each(function() { price = $(this); price = $(this).text().substr(0, $(this).text().indexOf('€')); price = price.replace(/,/g, '.'); console.log("Price = " + price) return }); quantity.each(function() { quantity = $(this).text(); console.log("Quantity = " + quantity) }); button.each(function() { $(this).click(function() { newPrice = price * quantity; console.log("New Price = " + newPrice); }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> Sale Price <div id="topSalePrice">9,99€</div> Regular Price <div id="topRegPrice">7,99€</div> <div class="button"> <div class="quantity">1</div> <div class="price">7,99€</div> </div> <div class="button"> <div class="quantity">2</div> <div class="price">6,99€</div> </div> <div class="button"> <div class="quantity">3</div> <div class="price">5,99€</div> </div>

Answer 1

HTML 帶有一個名為data-{SOME-NAME}的參數，它可以保存標簽的任意數據。

在您的情況下，我使用data-price來存儲價格值，使用data-quantity來存儲數量值。

然后jQuery附帶一個名為data的方法，該方法接受 data 屬性的正確部分作為參數。

例如，對於data-price我使用了data方法作為data('price') ，對於data-quantity我使用了data('quantity') 。

值得一提的是，JavaScript 也有自己的實現，可以從data-屬性中獲取數據。

因此，例如，如果您使用本機 javascript 實現獲得相同的結果，則代碼應如下所示：

let buttons = document.querySelectorAll('.button');

if ( buttons ) {
    buttons.forEach(
        function(button) {
            let price = button.querySelector('.price');
            let quantity = button.querySelector('.quantity');
    
            console.log('Price :', price.dataset.price)
            console.log('Quantity :', quantity.dataset.quantity)
        }
    );
}

（上面的代碼片段是根據我的想法編寫的。我沒有在我的控制台上測試它，所以可能包含錯誤。但總的來說，這就是本機解決方案的樣子:)）

 let topSalePrice = $("#topSalePrice"); let topRegPrice = $("#topRegPrice"); let quantity = $(".quantity"); let price = $(".price"); let button = $(".button") let topPrice = topSalePrice.data('price'); let regularPrice = topRegPrice.data('price'); console.log('Top Sale Price: ' + topPrice); console.log('Top Regular Price: ' + regularPrice); button.each(function() { $(this).click( function() { // Here, what I do, is to Query the DOM to find inside the Button, the two elements. The .price and the .quantity. let price = $(this).find('.price').first().data('price'); let quantity = $(this).find('.quantity').first().data('quantity'); newPrice = price * quantity; console.log("New Price = " + newPrice); } ) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> Sale Price <div id="topSalePrice" data-price='9.99' > 9,99€ </div> Regular Price <div id="topRegPrice" data-price='7.99' > 7,99€ </div> <div class="button"> <div class="quantity" data-quantity="1" > 1 </div> <div class="price" data-price='7.99' > 7,99€ </div> </div> <div class="button"> <div class="quantity" data-quantity="2" > 2 </div> <div class="price" data-price='6.99' > 6,99€ </div> </div> <div class="button"> <div class="quantity" data-quantity="3" >3</div> <div class="price" data-price='5.99' > 5,99€ </div> </div>

Answer 2

你可以這樣做，這是演示代碼：

<!DOCTYPE html>
<html>
<head>
<title>Demo code</title>
</head>
<body>

<div class="button" onclick="result(1,799)">
  <div class="quantity">1</div>
  <div class="price">7,99€</div>
</div>
<script>
function result(q,p){
console.log('New Price is' + ' '+ (parseInt(q)*parseInt(p))); 
}
</script>
</body>
</html>

我是用 vanilla js 做的，你可以很容易地轉換成 jquery

使用jQuery計算每個函數內的兩個數字

問題描述

2 個解決方案

解決方案1
1 已采納 2020-10-30 07:05:51

解決方案2
0 2020-10-30 07:10:08

使用jQuery計算每個函數內的兩個數字

問題描述

2 個解決方案

解決方案1 1 已采納 2020-10-30 07:05:51

解決方案2 0 2020-10-30 07:10:08

解決方案1
1 已采納 2020-10-30 07:05:51

解決方案2
0 2020-10-30 07:10:08