的jQuery /使用Javascript - 要在自身運行的腳本功能

Question

考慮以下幾點：

我有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代碼才能以這種方式工作？

Answer 1

您可以使用.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; 
    }); 
}); 

Answer 2

首先<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只會用於輸入標籤），那麼我們運行一個循環，看看它們是否爲空。這是您要查找的代碼行。