的jQuery /使用Javascript - 要在自身运行的脚本功能

考虑以下几点：的jQuery /使用Javascript - 要在自身运行的脚本功能

我有2 <div>

<div class="panel-body"> 
    //some parent class for each textbox 
    <input type="text" class="required" id="txtA"></input> 
    <input type="text" class="required" id="txtB"></input> 
    <button class="submitButton">A</button> 
</div> 

<div class="panel-body"> 
    //some parent class for each textbox 
    <input type="text" class="required" id="txtC"></input> 
    <input type="text" class="required" id="txtD"></input> 
    <input type="text" class="required" id="txtE"></input> 
    <button class="submitButton">B</button> 
</div>

和我的jQuery代码：

$(document).ready(function() { 
    $('.submitButton').click(function (e) { 
     var errorLess = true; 
     $(".TextError").remove(); 
     $(".required").each(function() { 
      $(this).parent().parent().removeClass("has-error"); 
      if ($(this).val() == "") { 
       $(this).parent().parent().addClass("has-error"); 
       $('<span class=\"TextError\">This field is required!</span>').insertAfter(this); 
       errorLess = false; 
      } 
     }); 
     return errorLess; 
    }); 
});

我怎么能在一个方式，只有当按钮包含，点击时验证div中的字段？

意思是，当我点击按钮A时，它只会验证txtA和txtB。当我点击按钮B时，它将验证txtC,txtD和txtE？

我该如何修改jQuery代码才能以这种方式工作？

来源

2017-04-17 NewbieCoder

对每个使用不同的'

''不是一个有效的HTML标签。 – Ricky

对不起，我急于输入这个问题，我实际上是在asp.net中编写的。我的脑海里充满了''。 – NewbieCoder

您可以使用.closest()和选择器".panel-body"来选择相对于当前.submitButton的.parentElement.parentElement。设置context的jQuery()呼叫，其中".required"是选择器。

不确定在.each()循环中调用$(this).parent().parent().removeClass("has-error");的目的是什么？

$(document).ready(function() { 
    $('.submitButton').click(function (e) { 
     var errorLess = true; 
     $(".TextError").remove(); 
     var closestPanel = $(this).closest(".panel-body"); 
     $(".required", closestPaenl).each(function() { 
      // $(this).parent().parent().removeClass("has-error"); 
      if ($(this).val() == "") { 
       $(this).parent().parent().addClass("has-error"); 
       $('<span class=\"TextError\">This field is required!</span>').insertAfter(this); 
       errorLess = false; 
      } 
     }); 
     return errorLess; 
    }); 
});

来源

2017-04-17 03:24:10 guest271314

'不确定$（this）.parent（）。parent（）。removeClass（“has-error”）的用途。在.each（）循环中调用？'我实际上每个文本框都有更多的父母，我只是最小化了规模。 – NewbieCoder

您可以使用带'.closest（）'的适当选择器作为参数传递，然后选择父元素的后代。为什么你不在问题中包含实际的'html'？ – guest271314

首先<textbox>不是一个有效的HTML元素。请参阅上W3Schools

HTML标签的完整列表试试这个

$(document).ready(function() { 
 
    $('.submitButton').click(function(e) { 
 
    var errorLess = true; 
 
    $(".TextError").remove(); 
 
    $(this).parent().find('.required').each(function() { 
 
     $(this).parent().parent().removeClass("has-error"); 
 
     if ($(this).val() == "") { 
 
     $(this).parent().parent().addClass("has-error"); 
 
     $('<span class=\"TextError\">This field is required!</span>').insertAfter(this); 
 
     errorLess = false; 
 
     } 
 
    }); 
 
    return errorLess; {} 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<div class="panel-body"> 
 
    <!--//some parent class for each textbox--> 
 
    <input type='text' class="required" id="txtA"></input> 
 
    <input type='text' class="required" id="txtB"></input> 
 
    <button class="submitButton">A</button> 
 
</div> 
 

 
<div class="panel-body"> 
 
    <!--//some parent class for each textbox--> 
 
    <input type='text' class="required" id="txtC"></input> 
 
    <input type='text' class="required" id="txtD"></input> 
 
    <input type='text' class="required" id="txtE"></input> 
 
    <button class="submitButton">B</button> 
 
</div>

从$(this).parent()会去点击按钮的父元素。然后我们通过执行.find('.required')来简单地找到哪些元素具有.required类。如果你想对它们进行验证（假设.required只会用于输入标签），那么我们运行一个循环，看看它们是否为空。这是您要查找的代码行。

来源

2017-04-17 03:26:57 CodeMonkey

的jQuery /使用Javascript - 要在自身运行的脚本功能

回答

相关问题