Question

在我的表中，CalculatedRate的值正在更新，每个函数的最后一个值。如果你看到控制台有三个不同的值，但是它取最后一个值并为所有三行更新相同的值。

  var calcObject = {
    run: function(flag) {
      var target_total = $('.TargetRate').val();
      var current_rate_total = $('.CurrentRateTotal').text();
      calcObject.difference = (parseFloat(current_rate_total) - parseFloat(target_total));
      var profit_total = 0;
      $("table").each(function() {
        $(this).find(".CurrentRate").each(function() {
          var werate = $(this).data('rate');
          var cost = $(this).data('cost');
          var profit = $(this).data('profit');

          calcObject.minsales = ((parseFloat(cost) * (parseFloat(profit))) / 100);
          calcObject.profit = (parseFloat(werate) - parseFloat(calcObject.minsales));

          calcObject.per_of_total = ((100 / (61.99)) * (parseFloat(calcObject.profit)));

          calcObject.per_of_diff = ((parseFloat(calcObject.difference) * (parseFloat(calcObject.per_of_total))) / 100);

          if (parseFloat(calcObject.per_of_diff) < parseFloat(calcObject.profit)) {

            calcObject.cal_rate = (parseFloat(werate) - parseFloat(calcObject.per_of_diff));

          } else if (parseFloat(calcObject.per_of_diff) > parseFloat(calcObject.profit)) {

            calcObject.cal_rate = (parseFloat(werate) - parseFloat(calcObject.profit));
          }
          console.log(calcObject.cal_rate);

          $('.CalculatedRate').text(parseFloat(calcObject.cal_rate).toFixed(2));
        });
      });
      var calTotal = 0;
      $(".CalculatedRate").each(function() {
        var value = $(this).text();
        if (!isNaN(value) && value.length != 0) {
          calTotal += parseFloat(value);
        }
      });
      $('.CalculatedRateTotal').html(parseFloat(calTotal).toFixed(2));
    }
  };
  $(function() {

    $(document).on('change', '.TargetRate', function() {
      calcObject.run(0);
    });
    $(document).on('change', '.CurrentRate', function() {
      calcObject.run(0);
    });
  });

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade in" id="dayRateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: block; padding-right: 15px;">
  <div class="modal-dialog modal-lg" role="document">
    <div class="priceDataAlgorithm">
      <div class="modal-content">
        <div class="modal-header">

          <h4 class="modal-title" id="myModalLabel">Day Rate Calculator</h4>
        </div>
        <div class="modal-body">
          <h4>Please enter your target day rate:</h4>

          <input type="text" class="form-control TargetRate" name="">
          <p>
            &nbsp;
          </p>
          <table class="table table-striped table-bordered table-condensed table-hover">
            <thead>
              <tr>
                <th>Category</th>
                <th>Current Rate</th>
                <th>Calculated Rate</th>
                <th>Overwrite Rate</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  Mini Planer
                </td>
                <td>
                  <input type="hidden" data-cost="120" data-profit="120" class="CurrentRate" data-rate="180"> 180

                </td>
                <td><span class="CalculatedRate"></span></td>
                <td>
                  <input type="text" class="form-control OverwriteRate" name="">
                </td>
              </tr>
              <tr>
                <td>
                  Planer Operator
                </td>
                <td>
                  <input type="hidden" data-cost="156" data-profit="130" class="CurrentRate" data-rate="220"> 220

                </td>
                <td><span class="CalculatedRate"></span></td>
                <td>
                  <input type="text" class="form-control OverwriteRate" name="">
                </td>
              </tr>
              <tr>
                <td>
                  Banksman
                </td>
                <td>
                  <input type="hidden" data-cost="110" data-profit="120" class="CurrentRate" data-rate="140"> 140

                </td>
                <td><span class="CalculatedRate"></span></td>
                <td>
                  <input type="text" class="form-control OverwriteRate" name="">
                </td>
              </tr>

            </tbody>
            <tfoot>
              <tr>
                <th>Total</th>
                <th><span class="CurrentRateTotal">540</span></th>
                <th><span class="CalculatedRateTotal"></span></th>
                <th>
                  <input type="text" class="form-control" name="">
                </th>
              </tr>
            </tfoot>
          </table>
        </div>

      </div>
    </div>
  </div>
</div>

有任何建议，拜托！这是jsfiddledemo

此代码段中不显示控制台，请参阅小提琴。

Answer 1

根据documentation，您应该在循环中使用函数参数而不是$ this。 E.g：

$(this).find(".CurrentRate").each(function() {
var werate = $(this).data('rate');

应该是

$(this).find(".CurrentRate").each(function(key,item) {
var werate = item.data('rate');

Answer 2

我发现问题所在。

$('.CalculatedRate').text(parseFloat(calcObject.cal_rate).toFixed(2));

在上面一行中，它无法找到最近的td标签。这应该在下面

 $(this).closest('tr').find("td:eq(2) .CalculatedRate").text(parseFloat(calcObject.cal_rate).toFixed(2));

然后它开始正常工作：）

值在foreach函数jquery中的表中没有变化

2 个答案: