jQuery onchange sum 不能限制输入类型数

Question

我使用脚本对输入值求和，它可以工作。但是，当我上下点击“input#total_selfmark”并没有改变，当我输入数字时，“input#total_selfmark”改变并且数字没有限制。 即使我已经设置了 min=0 max =$task_criteria->maximummark

     <div class="form-group">
{{ Form::number('selfmark','',['placeholder'=>'', 'class' =>'selfmark', 'min'=>'0','max'=>$task_criteria->maximummark]) }}
       </div>

这是脚本

$(document).ready(function() {
  //this calculates values automatically
  calculateSum();
  $(".selfmark").on("keydown keyup", function() {
    calculateSum();
  });
});

function calculateSum() {
  var sum = 0;

  //iterate through each textboxes and add the values
  $(".selfmark").each(function() {
    //add only if the value is number
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
      $(this).css("background-color", "#FEFFB0");
    } else if (this.value.length != 0) {
      $(this).css("background-color", "red");
    }
  });

  $("input#total_selfmark").val(sum.toFixed(2));
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
We miss some HTML here!

Answer 1

我猜你的 HTML，我也假设你故意有一个旧的 jQuery 版本

$(document).ready(function() {
  $(".selfmark").on("input", calculateSum).trigger("input");    });

function calculateSum() {
  var sum = 0;
  $(".selfmark").each(function() { // or map/reduce
    var val = this.value, max = +$(this).attr("max"), bg = "#FEFFB0";
    if (isNaN(val) || val.length == 0 || val>max) {
      bg= "red";
    }    
    else {
      sum += parseFloat(val);
    } 
    $(this).css("background-color", bg);
  });

  $("input#total_selfmark").val(sum.toFixed(2));
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
0-10: <input type="number" min="0", max="10" class="selfmark" value="5" /><br/>
0-20: <input type="number" min="0", max="20" class="selfmark" value="0" /><br/>
0-30: <input type="number" min="0", max="30" class="selfmark" value="0"/><br/>
<input type="text" readonly id="total_selfmark" />

替代方案 - 不是更短，而是使用 fn.map 和 reduce

$(document).ready(function() {
  $(".selfmark").on("input", calculateSum).trigger("input");
});

function calculateSum() {
  var sum = $(".selfmark").map(function(idx, ele) {
    var val = this.value, max = +$(this).attr("max"), bg = "#FEFFB0";
    if (isNaN(val) || val.length == 0 || val > max) {
      bg = "red";
      val = 0;
    } 
    else val = +val;
    $(this).css("background-color", bg);
    return val;
  }).get().reduce(function(a, b) { return a + b; }, 0); // sum the array
  $("input#total_selfmark").val(sum.toFixed(2));
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
0-10: <input type="number" min="0", max="10" class="selfmark" value="5" /><br/>
0-20: <input type="number" min="0", max="20" class="selfmark" value="0" /><br/>
0-30: <input type="number" min="0", max="30" class="selfmark" value="0"/><br/>
<input type="text" readonly id="total_selfmark" />

Answer 2

$(document).ready(function() {
  const $selfmarks = $(".selfmark");
  $selfmarks.on("input", calculateSum);
  $selfmarks.trigger("input");

  function calculateSum(e) {
    e.target.style.background = e.target.value === '' ? 'red' : 'transparent';
    e.target.value = Number(e.target.value) > 10 ? 10 : e.target.value
    
    const sum = Array.from($selfmarks).reduce(function (acc, $cur) {
      acc += Number($cur.value || 0)
      return acc
    }, 0);

    $("input#total_selfmark").val(sum.toFixed(2));
  }
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="number" min="1" max="10" class="selfmark" /><br/>
<input type="number" min="1" max="10" class="selfmark" /><br/>
<input type="number" min="1" max="10" class="selfmark" /><br/>
<input type="text" readonly id="total_selfmark" />