jQuery - 实现继续排名的好方法是什么

时间:2016-03-29 06:20:23

标签: javascript jquery

假设我现在有4个输入字段:

<table>
<tr><th></th><th>Factor 1</th></tr>
<tr><td>Company A</td><td><input type="text" name="text1" id="text1"></td></tr>
<tr><td>Company B</td><td><input type="text" name="text2" id="text2"></td></tr>
<tr><td>Company C</td><td><input type="text" name="text3" id="text3"></td></tr>
<tr><td>Company D</td><td><input type="text" name="text4" id="text4"></td></tr>
</table>

输入在每个输入字段中唯一为1到4的整数。这就像公司最适合因素的排名,以及第二个等等。

例如:

  • 当我们输入13时,我们会在排名中忽略2
  • 当我们输入124时,我们会发现警告3丢失。

输入不是必需的,但是当有输入时,序列必须是1到4.

这是我试过的代码。

function checkMissingRank(object){
  object.change(function() {
    var max = 0;
    var actSum = 0;
    var rows = object.length;

    for(var i=1 ; i<=rows ; i++){
        if($('#text'+i+'').val() != ""){
            var actVal = parseInt($('#text'+i+'').val());
            //alert("actVal: "+actVal);
            actSum = actSum + actVal;
            if(actVal>max){
                max=actVal;
                //alert("max: "+ max);
            }
        }
    }
    //alert("actSum: "+ actSum);

    totalSum = ((1+max)*max)/2;
    //alert("totalSum: "+ totalSum);

    var missVal = totalSum - actSum;
    //alert("missVal "+ missVal);

    if(missVal != 0){
        alert("Ranking "+missVal+" is missing.");
    }
  });
}
checkMissingRank($('input[name^="text"]'));

只有一个Value缺失(1个,2个,3个,4个缺失1个),它工作正常。但是当1,2都丢失时,它返回3丢失,这是1和2的总和。有没有更好的方法来做到这一点?

2 个答案:

答案 0 :(得分:0)

HTML:

<input type="text" name="text1" id="text1">
<input type="text" name="text2" id="text2">
<input type="text" name="text3" id="text3">
<input type="text" name="text4" id="text4">
<input type="button" id="btnTest">

和Jquery:

$("#btnTest").click(function() {
      $('input[type=text]').each(function() {
        var msg = $(this).prop("id");
        if ($(this).val() == "") {
          switch (msg) {
            case ("text1"):
              alert('miss 1');
              break;
            case ("text2"):
              alert('miss 2');
              break;
            case ("text3"):
              alert('miss 3');
              break;
            case ("text4"):
              alert('miss 4');
              break;
          }
        }

      })
    });

小提琴样本https://jsfiddle.net/shree/5ucxau2n/1/

我点击按钮创建一个示例。请帮助。

答案 1 :(得分:0)

这会警告每个丢失的输入。

$(function(){
  $("button").on("click", function(){
    $("input").each(function(){
      if($(this).val() == ""){
        alert($(this).attr("id")  + " is missing");
      }
    })
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myForm" id="myForm">
  <input type="text" name="text1" id="text1">
  <input type="text" name="text2" id="text2">
  <input type="text" name="text3" id="text3">
  <input type="text" name="text4" id="text4">
</form>
<button>Enter</button>

如果您只想要一个缺少的所有输入元素的列表。只有一个警告框:

$("button").on("click", function(){
  var str = ""
  $("input").each(function(){
    if($(this).val() == ""){
      str += $(this).attr("id") + " and "

    }
  })
  alert(str  + " is missing");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form name="myForm" id="myForm">
  <input type="text" name="text1" id="text1" placeholder = "type 1">
  <input type="text" name="text2" id="text2" placeholder = "type 2">
  <input type="text" name="text3" id="text3" placeholder = "type 3">
  <input type="text" name="text4" id="text4" placeholder = "type 4">
</form>
<button>Enter</button>

有问题吗?让我知道。