javascript - jQuery 只为被点击的元素运行函数

Question

我遇到了一个小问题，我不知道如何解决。下面的 HTML/PHP 代码从数据库获取不同的值并将它们输出到不同的输入字段中。

下面的 HTML/PHP 是一个元素，其中多个元素是由数据库中的不同值组成的。然后我得到了一个小的 javascript，它可以根据输入的值计算一些不同的值。问题是我有 5 个元素，并且只想计算其中一个元素，但如果我按下“btn-oppdater”按钮，它就会计算所有不同的元素。

如何让它只计算按钮所在的元素？

脚本

$('.btn-oppdater').click(function(){
  $(".kval_spill").each(function(){
    var fieldShow = $(this).next('.kval_spill_inner');
    var b_value_kval_1 = fieldShow.find('.b_value_kval_1')[0].value;
    var b_odds_kval_1 = fieldShow.find('.b_odds_kval_1')[0].value;
    var e_odds_kval_1 = fieldShow.find('.e_odds_kval_1')[0].value;
    var gebyr_kval = '0.02'

    var q_value = ((b_odds_kval_1 / (e_odds_kval_1 - gebyr_kval)) * b_value_kval_1);

    var q_tap = (b_odds_kval_1 - 1) * b_value_kval_1 - (e_odds_kval_1 - 1) * q_value; 

    var q_value_fixed = q_value.toFixed(2);
    var q_tap_fixed = q_tap.toFixed(2);
    fieldShow.find('.q_value_1')[0].value = q_value_fixed;
    fieldShow.find('.q_tap_1')[0].value = q_tap_fixed;
  });
});

HTML/PHP

    <?php while ($row = mysqli_fetch_assoc($result2)) { echo '
    <form style="margin-top: 10px;" action="" method="post" class="">
      <input type="hidden" class="kval_spill">
      <div class="kval_spill_inner">
        <input class="" type="hidden" name="id" value="'.$row['id'].'">
          <div class="form-row">
          <div class="form-group col-md-4">
            <input type="text" class="form-control kval_kamp_1" name="kval_kamp_1" value ="'.$row['kval_kamp_1'].'" placeholder="Kamp">
          </div>
          <div class="form-group col-md-3">
            <div class="input-group">
            <input type="text"class="form-control b_value_kval_1" name="b_value_kval_1" value ="'.$row['b_value_kval_1'].'" placeholder="Spill verdi">
            <div class="input-group-append">
              <span class="input-group-text">Kr</span>
            </div>
            </div>    
          </div>
          <div class="form-group col-md-2">
            <input type="text" class="form-control b_odds_kval_1" name="b_odds_kval_1" value ="'.$row['b_odds_kval_1'].'" placeholder="Odds">
          </div>
        </div>
        <div class="form-row">
          <div class="form-group col-md-4">
            <input type="text" class="form-control kval_marked_1" name="kval_marked_1" value ="'.$row['kval_marked_1'].'" placeholder="Type marked">
          </div>
          <div class="form-group col-md-3">
            <div class="input-group">
            <input type="text"class="form-control text-info q_value_1" name="q_value_1" value ="'.$row['q_value_1'].'" placeholder="Lay verdi">
            <div class="input-group-append">
              <span class="input-group-text">Kr</span>
            </div>
            </div>    
          </div>
          <div class="form-group col-md-2">
            <input type="text" class="form-control e_odds_kval_1" name="e_odds_kval_1" value ="'.$row['e_odds_kval_1'].'" placeholder="Odds">
          </div>
        </div>
        <div class="form-row">
          <div class="form-group col-md-2">
            <div class="input-group">
            <div class="input-group-append">
              <span class="input-group-text">Tap</span>
            </div>
            <input type="text" class="form-control text-danger q_tap_1" name="q_tap_1" value ="'.$row['q_tap_1'].'" placeholder
="0.00" readonly>
            <div class="input-group-append">
              <span class="input-group-text">Kr</span>
            </div>
            </div>    
          </div>
          <div class="col-auto">
            <button type="button" class="btn btn-outline-secondary btn-oppdater">Regn ut</button>
          </div>
        </div>
      </div>
    </form>
    <br>
    '; }?>

Answer 1

将 $(".kval_spill") 替换为 $(this).closest("form").find(".kval_spill")。

但看起来每个表单中只有一个 kval_spill 和 kvall_spill_inner，所以没有必要使用 .each()。您可以摆脱 .each() 循环，只需使用:

var fieldShow = $(this).closest("form").find('.kval_spill_inner');

而不是

fieldShow.find('.q_value_1')[0].value = q_value_fixed;
fieldShow.find('.q_tap_1')[0].value = q_tap_fixed;

你可以写:

fieldShow.find('.q_value_1').val(q_value_fixed);
fieldShow.find('.q_tap_1').val(q_tap_fixed);