Question

我正在尝试使用Javascript计算购物车中商品的总价。这是通过将数量乘以单价然后获得总计。购物车由PHP while循环填充，因此我使用的是类名。数量字段为下拉列表/选择，价格字段为范围。

＆＃13;

function sum() {

  var sum = 0;
  var q = 0;
  var s = 0;

  $('.itPrice,.qtys').each(function() {
    q = $('.qtys').text() || 0; //quantity
    s = $('.itPrice').text() || 0; //unit price
    sum = sum + (q * s);
  });

  //display total
  $("#sumT").text(sum);

}

＆＃13;

<!-- inside PHP while loop -->

<label>Price: </label>
<span class="itPrice"><b>'.$row["price"].'</b></span>

<label>Quantity: </label>
<Select id="qty" name="qty" class="qtys">
  <option value="1" selected>1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</Select>

<span id="sumT" name="sumT">*sum goes here*</span>

＆＃13;

输出 NaN （非数字）。我哪里错了？ HTML选择也存在问题，它没有选择所选的选项，只使用选项＆＃39; 1＆＃39;。

Answer 1

您可以选择两个相关元素，作为两个对象集合，迭代一个集合（同时使用数组索引来引用另一个）;这样你就可以得到数量和价格。

要获取select个已选元素，请使用jquery val()函数代替text();

作为旁注，您不应该在yout html中使用重复的id或名称作为输入。如果您想要具有相同名称的输入，则可以使用qty[]作为示例。

function sum() {

  var sum = 0, // Total sum
    it = $('.itPrice'), // All the .itPrice elements
    qty = $('.qtys'); // All the .qtys elements
  
  // For each .itPrice element
  it.each(function(i, e) {
    
    var current = $(this), // Gets the current .itPrice element
      related = $(qty[i]); // Get the related .qtys element, by array index
    
    // Sum
    sum += Number(current.find('b').text()) * related.val();
    
  });

  // return total
  return sum;

}

$('#calc').click(function() {
  console.log(sum());
});

console.log(sum());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Price: </label>
<span class="itPrice"><b>100</b></span>

<label>Quantity: </label>
<Select id="qty" name="qty" class="qtys">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</Select>

<br>
<br>

<label>Price: </label>
<span class="itPrice"><b>200</b></span>

<label>Quantity: </label>
<Select id="qty" name="qty" class="qtys">
  <option value="1" selected>1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4" selected>4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</Select>

<br>
<br>

<a id="calc" href="javascript:;">Get total</a>

Jquery乘以并添加span和dropdown值

1 个答案: