jquery - 如何在其他脚本中执行一个功能？

Question

我需要隐藏div id="FormStep"何时检查最后一次输入。

在我的页面上，我使用了这个 HTML 代码：

<div id="FormStep">
  <input type="text" name="test1" id="test1" class="validate" />
  <div id="Checktest1Input"></div>
  <input type="text" name="test2" id="test2" class="validate" />
  <div id="Checktest2Input"></div>
  <input type="text" name="test3" id="test3" class="validate" />
  <div id="Checktest3Input"></div>
<input type="button" id="Step" value="Send"/>
</div>

对于页面上的验证，我使用以下 JS 代码：

$('#Step').on('click',function(){
    $('.validate').each(function(){

        if ($(this).val().length == 0){
        $('#Check'+this.id+'Input').html('false');
          return false;
        } else {
        $('#Check'+this.id+'Input').html('true');
        }

      });
});

请告诉我如何在检查最后一次输入后添加$('#Step').hide();此代码执行的代码？$('#Step').hide();

Answer 1

您的代码可以通过以下方式显着简化：

$('#Step').on('click',function(){
    var valid = true;
    $('.validate').each(function(){
        valid = valid && $(this).val().length != 0;
        $(this).next().html("" + ($(this).val().length != 0)); 
    });
    if(valid){
        $(this).hide();
    }
    return valid;
});

Answer 2

工作小提琴

$('#Step').on('click',function(){
    var hideStep = true;
    $('.validate').each(function(){

        if ($(this).val().length == 0){
        $('#Check'+this.id+'Input').html('false');
          hideStep = false;
          return false;
        } else {
        $('#Check'+this.id+'Input').html('true');
        }
      });
    if (hideStep)
      $('#Step').hide();
});

Answer 3

使用变量并设置 $('#Step').hide(); 在每个函数之后：

$('#Step').on('click',function(){
    var error = false;
    $('.validate').each(function(){
        if ($(this).val().length == 0){
          $('#Check'+this.id+'Input').html('false');
          error = false;
        } else {
          $('#Check'+this.id+'Input').html('true');
          error = true;
        }
      });
    if(!error) { 
      $('#Step').hide();
    }
});

.each 是同步的，这意味着 .each 函数下的所有内容将在运行后加载。

Answer 4

我认为您正在寻找的是隐藏操作是否存在无效输入

$('#Step').on('click',function(){
    var valid = true;
    $('.validate').each(function(){
        if ($(this).val().length == 0){
            $('#Check'+this.id+'Input').html('false');
          valid = false;
        } else {
            $('#Check'+this.id+'Input').html('true');
        }
      });
    if(!valid){
        $('#Step').hide();
    }
});