javascript - 当输入的数字之和与指示的数字不同时如何显示按钮

Question

我正在寻找当输入字段中输入的数字总和小于或大于 8 时显示错误按钮的方法。输入字段位于由 PHP 循环生成的 HTML 表中。

我在循环中编写了这段 HTML 代码:

<tr class="new_row">
    <td>employee 1</td>
    <td><input class="position1" type="text"   value="8" placeholder="8"/></td>
    <td><input class="position2" type="text" value="0" placeholder="0"/></td>
    <td><input class="total" type="text" placeholder="8" disabled/></td>
    <td class="ee"> </td>
</tr>

还有JS

$('input').on('change', function () {
    var scope = $(this).closest('.new_row'),
        pos1 = $('.position1', scope).val(),
        pos2 = $('.position2', scope).val(),

        total = $('.total', scope),
        error = $('.error', scope);
    if ($.isNumeric(pos1) && $.isNumeric(pos2)) {

    var suma = Number(pos2)+ Number(pos1);
    if(suma !== 8)
    {
    var r= $("<a href='#' class='btn btn-danger mr5 mb10' >!!!</a>");
        $(".ee").append(r);
        total.val(suma + 'h');
    }else
    {

        error.val("ok");
        total.val(suma + 'h');
    }

    } else {
        total.val('');
    }
});

这里有两个问题。1) 当条件不满足时，错误按钮出现并保持可见。并且还添加了更多内容。我希望错误按钮在用户更正数据后消失。2) 每行都会出现错误按钮。即使在总和等于 8 的情况下也是如此。我希望 JS 代码只分别从每一行获取数据。

Answer 1

检查以下代码。演示可用 https://jsfiddle.net/xpvt214o/126161/

//bind recalculate function to row
$(".new_row").on("recalculate", function(){
    var scope = $(this);
  //clear previous error, if exist
  scope.find(".ee").html("");

  var sum = 0;
  //or find all inputs, exclude total, f.e. .find("input:not(.total)")
  scope.find(".position1, .position2").each(function(){
    var val = parseInt($(this).val());
    if(!isNaN(val)){
        sum += val;
    }else{
        sum = undefined;
    }
  });

  //set total to input
  scope.find(".total").val(!!sum ? (sum + "h") : '');

  if(sum !== 8){
    //add error
    scope.find(".ee").append(
        $("<a href='#' class='btn btn-danger mr5 mb10' >!!!</a>")
    );
  }

}).trigger("recalculate");

//detect field change
$('.new_row input').on('change', function () {
    $(this).closest(".new_row").trigger("recalculate");
});