Jqueryを使用して数量オプションリストで総価格を設定する方法

1から5までの数量が選択されたときに合計価格を動的に調整しようとしています。私はJqueryを使用することに新しいですので、どんな助けも大歓迎です、ありがとうございます！Jqueryを使用して数量オプションリストで総価格を設定する方法

HTML：

<table> 
    <thead> 
     <tr> 
      <th>Quantity</th> 
      <th>Price</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td> 
       <select id="quantity"> 
        <option data-quantity="1">1</option> 
        <option data-quantity="2">2</option> 
        <option data-quantity="3">3</option> 
        <option data-quantity="4">4</option> 
       </select> 
      </td> 
      <td id="price" data-price="@i.Price">[email protected]</td> 
     </tr> 
    </tbody> 
</table> 

<p>Total Price: $<span id="total></span></p>

JAVASCRIPT：問題は、この行var p = $("#price").find("[data-price]")であるように思わ

<script> 
    $(document).ready(function() { 

     var p = $("#price").find("[data-price]") 

     $("#quantity").change(function() { 
      var q = $(this).find(':selected').data('quantity'); 
      var total = p * q; 
      $("#total").text(total); 
     }); 
    }); 
</script>

出典

2017-11-18 sg9

'VARのP =数（$（ "＃価格"）のデータ（ '価格'））;' –

idがpriceの要素が見つかりましたので、data-priceを取得してください。

$(document).ready(function() { 
 
    const p = $("#price").data('price'); 
 

 
    $("#quantity").change(function() { 
 
     const q = $(this).find(':selected').data('quantity'); 
 
     const total = p * q; 
 
     $("#total").text(total); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
     <tr> 
 
      <th>Quantity</th> 
 
      <th>Price</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td> 
 
       <select id="quantity"> 
 
        <option data-quantity="1">1</option> 
 
        <option data-quantity="2">2</option> 
 
        <option data-quantity="3">3</option> 
 
        <option data-quantity="4">4</option> 
 
       </select> 
 
      </td> 
 
      <td id="price" data-price="1000">1000</td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 

 
<p>Total Price: $<span id="total"></span></p>

出典

2017-11-18 06:24:31

注 'データ（）'返す必要がありますnumber ...も '*'演算子を使って数値にキャストされるので、実際には必要ないparseInt – charlietfl

'*'の場合、そうです。 OK編集済み –

、あなたは

var p = $("#price").data("price");

に数量

の変更が必要な場合があります

出典

2017-11-18 06:18:46 brk

<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
    <script type="text/javascript"> 
 
     $(document).ready(function() { 
 
      $("#quantity").on('change',function() { 
 
       $('#total').text($('#price').attr('data-price') * $(this).val()); 
 
      }); 
 
     }); 
 
    </script> 
 

 
</head> 
 
<body> 
 
    <table> 
 
     <thead> 
 
      <tr> 
 
       <th>Quantity</th> 
 
       <th>Price</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
       <td> 
 
        <select id="quantity"> 
 
         <option data-quantity="1">1</option> 
 
         <option data-quantity="2">2</option> 
 
         <option data-quantity="3">3</option> 
 
         <option data-quantity="4">4</option> 
 
        </select> 
 
       </td> 
 
       <td id="price" data-price="500">500 $</td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 

 
    <p>Total Price: $<span id="total"></span></p> 
 
</body> 
 
</html>

出典

2017-11-18 09:39:17

Jqueryを使用して数量オプションリストで総価格を設定する方法

答えて

関連する問題