Question

我正在尝试使用jQuery验证输入字段。我想检查字段的val();是否大于5，或者字段的值是否小于2.

目前，这就是我所拥有的：

$('#customamount').keyup(function() {
    $('.amount-field').text($(this).val());
    if($(this).val() > 5){
        $(this).addClass("error");
        $(this).prop("title","Whoops! Too high");
        $(this).tooltip('toggle');
    }else{
        $(this).removeClass("error").addClass("success");
        $(this).attr("title","Good!");
        $(this).tooltip('toggle');     
    }
    if($(this).val() < 2){
        $(this).addClass("error");
        $(this).prop("title","The minimum amount is 2.");
        $(this).tooltip('toggle');
    }else{
        $(this).removeClass("error").addClass("success");
        $(this).attr("title","Good!.");
        $(this).tooltip('toggle');     
    }
});
<input type="text" value="10" id="customamount">

目前，它只是将.success类添加到输入和title="Good!"

如何组合上述两个IF语句？

Answer 1

使用else if：

    if($(this).val() > 5){
        $(this).addClass("error");
        $(this).prop("title","Whoops! Too high");
        $(this).tooltip('toggle');
    }
    else if($(this).val() < 2){
        $(this).addClass("error");
        $(this).prop("title","The minimum amount is 2.");
        $(this).tooltip('toggle');
    }else{

       $(this).removeClass("error").addClass("success");
       $(this).attr("title","Good!.");
       $(this).tooltip('toggle');      
    }

Answer 2

您可以使用和else if，$(this)的临时变量，方法链接以及从if语句中移出重用代码来大量清理该函数：< / p>

$('#customamount').keyup(function() {
    var t = $(this); // Only convert `this` to a jQuery object once.
    $('.amount-field').text(t.val());

    if(t.val() > 5) {
        t.addClass("error")
         .prop("title","Whoops! Too high");
    } else if(t.val() < 2) {
        t.addClass("error")
         .prop("title","The minimum amount is 2.");
    } else {
        t.removeClass("error").addClass("success")
         .attr("title","Good!");
    }
    t.tooltip('toggle'); //Whatever the value of `t.val()`, this should be called.
});

Answer 3

var $this = $(this); 
var val = $this.val();
if(val > 5) {
  // case for 5
  return;
}
if(val < 2) {
  // case for 2
  return;
}
// good case

旁注：缓存你的jquery调用。不要重做它们。如果你这么做的话，这是不必要的工作，它会影响性能。

另外你应该看看这个： http://jqueryvalidation.org/

当有更简单的方法来完成时，不要强调自己的验证：）

jQuery - 如果声明，将两个IF结合起来

3 个答案: