Question

我正在尝试创建一个简单的验证函数，用于在This Demo验证用户输入。现在我的问题是使用$(this).来引用具有相同类型的每个输入。例如，在这个例子中，我尝试了

$('#email1').parent().after('<div class="err" role="alert">Can Not be Empty</div>');

哪个有效，但是当我使用

时

 $(this).parent().after('<div class="err" role="alert">Can Not be Empty</div>');

我没有得到验证的任何东西

这是我的代码

<div class="form-group">
    E-Mail 1:  <input type="email" name="email1" id="email1"/>
</div>
<div class="form-group">
    E-Mail 2:  <input type="email" name="email2" id="email2" />
</div>
<button type="button" id="exe">Validate</button>

<script>
$(function() {

function emailInput(inputData) {
      inputData = $.trim($(inputData).val());
      if (inputData == "") {
          $(this).parent().after('<div class="err" role="alert">Can Not be Empty</div>');
      } else {
          return inputData;
      }
  }

 $("#exe").on("click",function(){
   $(".err").hide();
   if (emailInput($('#email1').val())){
           alert($('#email1').val());
   }   

 });

});
</script>

Answer 1

jQuery为其方法提供了上下文（即this的值是什么），您的函数没有提供this，因此this引用window }或全局范围。如果您想使用this并让它引用当前的DOM节点，则必须使用call，apply或bind方法调用您的函数并提供值jQuery的this。

// first argument is the context, i.e. what this refers to, subsequent arguments are your function arguments
emailInput.call($('#email1').get(0), $('#email1').val())

以下是一些解释call，apply和bind的链接：

Answer 2

这就是我在评论中解释的： DEMO

$(function() {

function emailInput(elem) {
      inputData = $.trim(elem.val());
      if (inputData == "") {
          elem.parent().after('<div class="err" role="alert">Can Not be Empty</div>');
      } else {
          return inputData;
      }
  }

 $("#exe").on("click",function(){
   $(".err").hide();
   if (emailInput($('#email1'))){
           alert($('#email1').val());
   }   

 });

});

Answer 3

您的代码唯一的问题是，在您的emailInput函数中没有this的引用，这就是您的代码在此时断开的原因。

当一个元素被一个事件命中并将它绑定到事件处理程序时，这是有效的。只有这个元素可以与 this 引用一起使用。对于像父项子元素这样的其他元素，您需要使用id或任何其他选择器。我希望这能说清楚你做错了什么。

在提交点击时将$（this）引用到多输入的问题

3 个答案: