Question

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

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

function extend( a, b ) {
        for( var key in b ) { 
            if( b.hasOwnProperty( key ) ) {
                a[key] = b[key];
            }
        }
        return a;
    }

copyarray = extend( {}, copyarray);
extend( copyarray, array);

和JS

<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>

这里有两个问题。 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");
});

当输入的数字总和与指示的数字不同时，显示按钮的方式

1 个答案: