javascript - 使用 Jquery 计算文本框值但不起作用

Question

我对这段代码有一些问题。代码无需循环即可工作，但我需要在每个循环中更改 div id、输入 id 和变量名称。 “@id's”值依次上升(例如:1-2-3....)。但我无法计算总和。 这是我的代码；

<div class="row verigirisler_@id" id="turdiv_@id" style="display:none">
  @{ foreach (var tbirimfiyat in ViewBag.TurlerBirimFiyat)
  {
  if (item.Musteri_ID == tbirimfiyat.Musteri_ID && tur.Tur_ID == tbirimfiyat.Tur_ID)
  {
  <input type="text" class="turbirimfiyat" id="turbirfiyat_@id" name="Musteri_ID" value="@tbirimfiyat.tBirim_Fiyat" />
  }
  }
  }

  <div class="col mb-1">
    <div class="input-group">
      <div class="input-group-append">
        <span class="input-group-text bg-success">Verilen @tur.Tur_Ad</span>
        <input type="number" value="0" id="verilen_@id" class="form-control turadetler_@id" name="verilen">
      </div>
    </div>
  </div>
  <div class="col mb-1">
    <div class="input-group">
      <div class="input-group-append">
        <span class="input-group-text ml-3 bg-success">Alınan @tur.Tur_Ad</span>
        <input type="number" class="form-control turadetler_@id" id="alinan_@id" name="alinan" value="0">
      </div>
    </div>
  </div>
  <div class="col mb-1">
    <div class="input-group">
      <div class="input-group-append">
        <span class="input-group-text ml-3 bg-success">Alınan Para</span>
        <input type="number" class="form-control" id="para_@id" name="para" value="0">
      </div>
    </div>
  </div>


    <script type="text/javascript">
        $(document).ready(function() {
  var birim_@id = $('#turbirfiyat_@id').val();
  $(".turadetler_@id").on("keydown keyup", function() {
    var sum_@id = 0;
    //iterate through each textboxes and add the values
    $(".turadetler_@id").each(function() {
      //add only if the value is number
      if (!isNaN(this.value) && this.value.length != 0) {
        sum_@id += parseFloat(this.value) * (birim_@id) //(Number(birim_@id) || 0)
        $(this).css("background-color", "#FEFFB0");

      } else if (this.value.length != 0) {
        $(this).css("background-color", "red");
      }
    });
    $("input#para_@id").val(sum_@id);
  });
});


      </script>

</div>

错误消息； jquery-3.3.1.js:8032 指定的值“NaN”不是有效数字。该值必须与以下正则表达式匹配:-?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?

这里是我的没有循环的代码；

  $(document).ready(function() {
    var birim= $('#turbirfiyat').val();
    $(".turadetler").on("keydown keyup", function() {
      var sum = 0;
      
      $(".turadetler").each(function() {
        
        if (!isNaN(this.value) && this.value.length != 0) {
          sum += parseFloat(this.value) * birim;
          $(this).css("background-color", "#FEFFB0");
        } 
        else if (this.value.length != 0) {
          $(this).css("background-color", "red");
        }
      });
      $("#para").val(sum.toFixed(2));
    });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr>
        <td width="40px">1</td>
        <td>Number</td>
        <td><input  type="text" name="txt" id="turbirfiyat" value="2" /></td>
    </tr>
    <tr>
        <td>2</td>
        <td>verilen</td>
        <td><input class="turadetler" type="text" name="txt" id="verilen"value="0" /></td>
    </tr>
    <tr>
        <td>3</td>
        <td>Alinan</td>
        <td><input class="turadetler" type="text" name="txt" id="alinan" value="0" /></td>
    </tr>
    <tr id="summation">
        <td  colspan ="2" align="right">
            Sum :
        </td>
        <td>
          <input type="text" id='para' name="input" />
        </td>
        </span>
        </td>
    </tr>
</table>

输出；

<div class="row verigirisler_3" id="turdiv_3" style="">
  <input type="text" class="turbirimfiyat" id="turbirfiyat_3" name="Musteri_ID" value="0,2">


  <div class="col mb-1">
    <div class="input-group">
      <div class="input-group-append">
        <span class="input-group-text bg-success">Verilen Tahinli</span>
        <input type="number" value="0" id="verilen_3" class="form-control turadetler_3" name="verilen" style="background-color: rgb(254, 255, 176);">
      </div>
    </div>
  </div>
  <div class="col mb-1">
    <div class="input-group">
      <div class="input-group-append">
        <span class="input-group-text ml-3 bg-success">Alınan Tahinli</span>
        <input type="number" class="form-control turadetler_3" id="alinan_3" name="alinan" value="0" style="background-color: rgb(254, 255, 176);">
      </div>
    </div>
  </div>
  <div class="col mb-1">
    <div class="input-group">
      <div class="input-group-append">
        <span class="input-group-text ml-3 bg-success">Alınan Para</span>
        <input type="text" class="form-control" id="para_3" name="para" value="0">
      </div>
    </div>
  </div>
  <script type="text/javascript">
    $(document).ready(function() {
      var birim_3 = $('#turbirfiyat_3').val();
      $(".turadetler_3").on("keydown keyup", function() {
        var sum_3 = 0;
        $(".turadetler_3").each(function() {
          if (!isNaN(this.value) && this.value.length != 0) {
            sum_3 += parseFloat(this.value) * birim_3; //(Number(birim_3) || 0)
            $(this).css("background-color", "#FEFFB0");

          } else if (this.value.length != 0) {
            $(this).css("background-color", "red");
          }
        });
        $("input#para_3").val(sum_3);
      });
    });

  </script>



</div>

我该如何解决？

Answer 1

使用$(this).val()而不是this.value。不要混合使用 Plain JS 和 JQuery。

$(document).ready(function () {
  var birim = $("#turbirfiyat").val();
  $(".turadetler").on("keydown keyup", function () {
var sum = 0;
//iterate through each textboxes and add the values
$(".turadetler").each(function () {
  const val = $(this).val();
  //add only if the value is number
  if (!isNaN(val) && val.length != 0) {
    sum += parseFloat(val) * (Number(birim) || 0);
    $(this).css("background-color", "#FEFFB0");
  } else if (val.length != 0) {
    $(this).css("background-color", "red");
  }
});
$("#para").val(sum.toFixed(2));
  });
});

  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr>
        <td width="40px">1</td>
        <td>Number</td>
        <td><input type="text" name="txt" id="turbirfiyat" value="2" /></td>
    </tr>
    <tr>
        <td>2</td>
        <td>verilen</td>
        <td><input class="turadetler" type="text" name="txt" id="verilen" value="0" /></td>
    </tr>
    <tr>
        <td>3</td>
        <td>Alinan</td>
        <td><input class="turadetler" type="text" name="txt" id="alinan" value="0" /></td>
    </tr>
    <tr id="summation">
        <td colspan="2" align="right">
            Sum :
        </td>
        <td>
            <input type="text" id='para' name="input" />
        </td>
        </span>
        </td>
    </tr>
</table>