javascript - 在另外两个类之间切换元素的简单而优雅的方法

Question

<!--language:lang-html-->
<div class="form-group m-b-40 ">
    <input type="text" class="form-control" id="input1">
    <span class="bar"></span>
    <span class="error_form" id="bname_error_message"></span>
    <label for="input1">Regular Input</label>
</div>

在上面的html中，我需要将“form-control-success”类添加到input元素中，并只要它符合状态if (pattern.test(bname) && bname !== '')

同样的逻辑也应该应用于 input 的父元素。但这次不同的类“has-success”应该添加到父类中并保留它，直到满足相同的条件。

对于其他情况，如 else if(bname !== '') 和 (!pattern.test(bname)) 类 "form-control已分别添加到输入及其父级的 -success" 和 "has-success" 应替换为其相反的类 "form-control-warning" > 和“有警告”。此过程与“keyup”事件绑定(bind)。我想知道是否有一种方法或一种优雅的方式可以减少代码行数并保持简单。

以笨拙的方式，代码如下所示:

     <!--language: lang-js-->
        $("#input1").keyup(function(){
            check_bname();
         });

        function check_bname() {
            var pattern = /^[a-zA-Z]*$/;
            var bname = $("#input1").val();
         if (pattern.test(bname) && bname !== '') 
         {             
          $("#bname_error_message").hide();
          $("#input1").removeClass("form-control-warning");
          $("#input1").parents(".form-group").removeClass("has-warning") 
          $("#input1").parents(".form-group").addClass("has-success")
          $("#input1").addClass("form-control-success"); 
         }  

        else if(bname === '') 
        {
          $("#bname_error_message").html("Should not be empty");
          $("#bname_error_message").show();
          $("#input1").removeClass("form-control-success"); 
          $("#input1").parents(".form-group").removeClass("has-success")
          $("#input1").addClass("form-control-warning");   
          $("#input1").parents(".form-group").addClass("has-warning")          
        } 

       else 
       {
        $("#bname_error_message").show();
        $("#bname_error_message").html("Should contain only Characters");
        $("#input1").removeClass("form-control-success"); 
        $("#input1").parents(".form-group").removeClass("has-success")
        $("#input1").addClass("form-control-warning");           
        $("#input1").parents(".form-group").addClass("has-warning")
       }
}

Answer 1

这是您的代码的一个版本，更简洁，并使用更干燥的编码(更少的重复)，但是我无法尝试该代码，因此它可能包含一两个错误，您需要先尝试一下你跑了，但我希望你能得到大概的想法:

<!--language:lang-jquery-->
$elemInput.keyup(function(){
  check_bname();
});

function check_bname() {
  var pattern = /^[a-zA-Z]*$/,
  bname = $elemInput.val(),
  $elemInput = $("#input1"),
  $elemError = $("#bname_error_message"),
  patternMatch = pattern.test(bname) && bname !== '';

  $elemError[patternMatch ? 'hide' : 'show']();
  $elemError.removeClass(patternMatch ? "form-control-warning" : "form-control-success")
  $elemInput.parents(".form-group").removeClass(patternMatch ? "has-warning" : "has-success") 
  $elemInput.addClass(patternMatch ? "form-control-success" : "form-control-warning"); 
  $elemInput.parents(".form-group").addClass(patternMatch ? "has-success" : "has-warning")
  
  if (!patternMatch) {
    $elemError.html(bname === '' ? "Should not be empty" : "Should contain only Characters");
  }
}