每张卡的平均计算

Question

我有一个简单的计算方法来求一张卡片（大约 100 张卡片）中 2 个值的平均值。

虽然平均值并没有输入每张卡片，但数字只是从每张卡片中消失。

我是否需要打破循环，研究它看起来像 .find 无论如何都会打破循环......

任何想法：

$(document).ready(function() {
  $(".card").each(function(){
    let counter = $(this).find(".counter").val();
    let countPrice = $(this).find(".counter-price").val();
    let result = counter / countPrice;
    $(this).find($(".avPrice").val(result));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card 688AttackSub">
  <img src="688%20attach%20sub.jpg" alt="688 Attack Sub">
  <div class="info-container">
    <p>688 Attack Sub</p>
    <p>1995</p>
    <div class="no-sold">
      <p>Number Sold</p>
      <div class="buttons">
        <button class="btn btn-outline-secondary btn-minus"><i class="fa fa-minus"></i></button>
        <input class="form-control counter" min="0" name="quantity" value="0" type="number">
        <button class="btn btn-outline-secondary btn-plus"><i class="fa fa-plus"></i></button>
      </div>
    </div>
    <div class="sold-price">
      <p>Total Sold Price</p>
      <div class="buttons">
        <button class="btn btn-outline-secondary btn-neg"><i class="fa fa-minus"></i></button>
        <input class="form-control quantity counter-price" min="0" name="quantity" value="0" type="number"><button class="btn btn-outline-secondary btn-add"><i class="fa fa-plus"></i></button>
      </div>
    </div>
    <div class="av-price">
      <p>Average Price</p><input class="form-control quantity avPrice" min="0" name="quantity" value="0" type="number">
    </div>
    <div class="last-sold">
      <p>Last Sold Date</p><input class="form-control quantity lastSoldDate" min="0" name="quantity" value="0" type="number">
      <p>Last Sold Price</p><input class="form-control quantity lastSoldPrice" min="0" name="quantity" value="0" type="number">
    </div>
  </div>
</div>
<script src="AvPrice%20calc.js" type="text/javascript"></script>
<script src="Counter.js" type="text/javascript"></script>

Answer 1

两件事。

在每个循环中...$(this) 不是您认为的那样。
您应该使用两个 .each() 参数：index 和 item。

那么...如果result 是NaN，就像除以零一样。确保将值设置为零。由于NaN 是假的，您可以使用or 运算符来做到这一点：

$(item).find($(".avPrice").val(result||0));

$(document).ready(function() {
  $(".card").each(function(index,item){
    let counter = $(item).find(".counter").val();
    let countPrice = $(item).find(".counter-price").val();
    let result = counter / countPrice;
    $(item).find($(".avPrice").val(result||0));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card 688AttackSub">
  <img src="688%20attach%20sub.jpg" alt="688 Attack Sub">
  <div class="info-container">
    <p>688 Attack Sub</p>
    <p>1995</p>
    <div class="no-sold">
      <p>Number Sold</p>
      <div class="buttons">
        <button class="btn btn-outline-secondary btn-minus"><i class="fa fa-minus"></i></button>
        <input class="form-control counter" min="0" name="quantity" value="0" type="number">
        <button class="btn btn-outline-secondary btn-plus"><i class="fa fa-plus"></i></button>
      </div>
    </div>
    <div class="sold-price">
      <p>Total Sold Price</p>
      <div class="buttons">
        <button class="btn btn-outline-secondary btn-neg"><i class="fa fa-minus"></i></button>
        <input class="form-control quantity counter-price" min="0" name="quantity" value="0" type="number"><button class="btn btn-outline-secondary btn-add"><i class="fa fa-plus"></i></button>
      </div>
    </div>
    <div class="av-price">
      <p>Average Price</p><input class="form-control quantity avPrice" min="0" name="quantity" value="0" type="number">
    </div>
    <div class="last-sold">
      <p>Last Sold Date</p><input class="form-control quantity lastSoldDate" min="0" name="quantity" value="0" type="number">
      <p>Last Sold Price</p><input class="form-control quantity lastSoldPrice" min="0" name="quantity" value="0" type="number">
    </div>
  </div>
</div>