Javascript 无法使简单jQuery工作

我正在学习jQuery，但我无法让这个示例工作。我知道这很简单，但我不知道我错过了什么。我试图在文本字段中添加类“invalid”

<script src="../jquery/jquery-1.8.2.js"></script>
<script src="../jquery/jquery.ui.effect.js"></script>
<script>
  $(function() {
    $('button.btn').on('click', function() {
      if ('create_task' == $(this).val()) {
        for (var i = 0; i < $('.validate').length; i++) {
          if ("" == $('.validate').eq(i).val()) {
            $('.validate').eq(i).addClass('invalid');
          } else {
            $('.validate').eq(i).removeClass('invalid');
          }
      }
      return false;
   }         
  });
</script>
<main>
    <form>
       <div class="row">
          <div class="input-field col s6">
             <input name="name" type="text" class="validate">
             <label class="active" for="task_name">Task Name</label>
          </div>
       </div>

       <button class="btn" type="submit"  value="create_task" name="createTask">Create Task</button>
    </form> 
</main>

$（函数（）{
$（'button.btn'）。在（'click'，function（）上{
if（'create_task'=$（this.val（））{
对于（变量i=0；i<$（'.validate'）。长度；i++）{
如果（“==$（'.validate'）.eq（i）.val（））{
$（'.validate'）.eq（i）.addClass（'invalid'）；
}否则{
$（'.validate'）.eq（i）.removeClass（'invalid'）；
}
}
返回false；
}         
});
任务名称
创建任务

使用

event.preventDefault（）

阻止表单提交

查看他的

下面是片段

$（'button.btn'）。单击（函数（事件）{
event.preventDefault（）；
if（'create_task'=$（this.val（））{
对于（变量i=0；i<$（'.validate'）。长度；i++）{
如果（“==$（'.validate'）.eq（i）.val（））{
$（'.validate'）.eq（i）.addClass（'invalid'）；
}否则{
$（'.validate'）.eq（i）.removeClass（'invalid'）；
}
}
}
})；

。无效{
背景：红色；
}

任务名称
创建任务

您的Javascript中存在语法错误。更正的Javascript：

$(function() {
    $('button.btn').on('click', function() {
        if ('create_task' == $(this).val()) {
            for (var i = 0; i < $('.validate').length; i++) {
                if ("" == $('.validate').eq(i).val()) {
                    $('.validate').eq(i).addClass('invalid');
                } else {
                  $('.validate').eq(i).removeClass('invalid');
                }
            }
            return false;
        }
    });
});

$（函数（）{
$（'button.btn'）。在（'click'，function（）上{
if（'create_task'=$（this.val（））{
对于（变量i=0；i<$（'.validate'）。长度；i++）{
如果（“==$（'.validate'）.eq（i）.val（））{
$（'.validate'）.eq（i）.addClass（'invalid'）；
}否则{
$（'.validate'）.eq（i）.removeClass（'invalid'）；
}
}
返回false；
}
});
});

在这里拉小提琴：

---

但是我想补充的是，返回没有多大意义。它有时返回false，有时返回void。你到底想做什么？

你的代码有很多问题。首先，如果你想捕获表单提交，请使用函数，而不是单击按钮。否则，你可以删除表单标签并捕获单击按钮tton元素

此外，您还可以使用.use for循环jQuery对象，因为它是一个本机JavaScript功能，所以速度肯定更快。我已经对此进行了概念验证

请参阅此代码

$（函数（）{
$（'button.btn'）。在（'click'，函数（）{
if（'create_task'=$（this.val（））{
$（'.validate'）。每个（函数（即，e）{
如果（“==$（e）.val（））{
$（'.validate'）.addClass（'invalid'）；
}否则{
$（'.validate'）.removeClass（'invalid'）；
}
})
}
})
})；

。无效
{
背景色：黑色；
}

任务名称
任务名称
创建任务

因此，代码中的问题是缺少一些结尾“'）和“}”。以下内容将使其正确：

$(function() {
 $('button.btn').on('click', function() {
  if ('create_task' == $(this).val()) {
    for (var i = 0; i < $('.validate').length; i++) {
      if ("" == $('.validate').eq(i).val()) {
        $('.validate').eq(i).addClass('invalid');
      } else {
        $('.validate').eq(i).removeClass('invalid');
      }
    } // end of for
  return false;
  } // end of if
 }); // end of click
});

在代码中，以及在浏览器中以调试器模式（F12）运行它时，可以在代码中逐步调试，查看变量值，并查看程序的行为

但是，如果在代码中您只想在用户单击按钮时查看输入文本是否为空，则可以尝试以下代码段：

<script>
$(function() {
  $('#create_task').on('click', function() {
    event.preventDefault(); // prevents submission
    if ($('.validate').val().length > 0) {
       $('.invalid').hide(); 
    } else {
       $('.invalid').show();
    }// end of if
  }); // end of click
});
</script>

<main>
  <form>
   <div class="row">
      <div class="input-field col s6">
         <input name="name" type="text" class="validate">
         <div class="invalid" style="display:none">Invalid input</div>
         <label class="active" for="task_name">Task Name</label>
      </div>
   </div>

   <button id="create_task" class="btn" type="submit" name="createTask">Create Task</button>
  </form> 
</main>

$（函数（）{
$（'create#u task'）。在（'click'，function（）上{
event.preventDefault（）；//防止提交
如果（$（'.validate'）.val（）.length>0）{
$（'.invalid'）.hide（）；
}否则{
$（'.invalid'）.show（）；
}//if结束
})；//单击结束
});
无效输入
任务名称
创建任务

---

请注意，我是如何将button的名称更改为id，以便在不进行额外验证的情况下检测按钮的。我希望它能有所帮助。

您有一个语法错误，因为您没有关闭脚本中的

$（function（）{

）

此外，将return false移动到外部块（这样可以防止按钮的默认submit行为），并使用

submit

（与使用

.submit（）

方法相同）事件如下：

$(function() {
$('button.btn').on('submit', function() {
  if ('create_task' == $(this).val()) {
    for (var i = 0; i < $('.validate').length; i++) {
          if ("" == $('.validate').eq(i).val()) {
            $('.validate').eq(i).addClass('invalid');
          } else {
            $('.validate').eq(i).removeClass('invalid');
          }
      }
   }     

  return false;    
  });
});

$（函数（）{
$（'button.btn'）。在（'submit'，function（）上{
if（'create_task'=$（this.val（））{
对于（变量i=0；i<$（'.validate'）。长度；i++）{
如果（“==$（'.validate'）.eq（i）.val（））{
$（'.validate'）.eq（i）.addClass（'invalid'）；
}否则{
$（'.validate'）.eq（i）.removeClass（'invalid'）；
}
}
}     
返回false；
});
});

---

注意：如果您愿意，您可以在触发

单击事件时将
type='submit'
更改为
type='button'
，从而避免在JavaScript代码中返回
false
。
控制台上有什么错误？没有错误。只是当我按下按钮时，“无效”类没有在我的控制台中添加未捕获的语法错误：输入意外结束

$(function() {
$('button.btn').on('submit', function() {
  if ('create_task' == $(this).val()) {
    for (var i = 0; i < $('.validate').length; i++) {
          if ("" == $('.validate').eq(i).val()) {
            $('.validate').eq(i).addClass('invalid');
          } else {
            $('.validate').eq(i).removeClass('invalid');
          }
      }
   }     

  return false;    
  });
});