單擊具有相同類的按鈕時如何獲取特定元素的值

Question

這是我的html

<h3>IRCTC Checked Template</h3>
<div>
<textarea rows="4" cols="50" name="comment" class="txt" form="usrform">
Enter text here...IRCTC Checked Template</textarea>
<button class="w3-btn w3-blue w3-border-black  w3-card-24 w3-hover-green 
 btnclass" id="btn" name="b">Send</button>
</div>

<h3>ID Created Template</h3>
<div>
<textarea rows="4" cols="50" name="comment" class="txt" form="usrform">
Enter text here... ID Created Template</textarea>
<button class="w3-btn w3-blue w3-border-black  w3-card-24 w3-hover-green 
btnclass"  id="btn" name="b">Send</button>
</div>

在單擊具有相同類的按鈕時，我想在此處獲取相應的textarea值

$(".btnclass").click(function(){
alert($('.txt').val());
});

但沒有選擇相應的.txt class 。 對於兩個按鈕，則獲得相同的.txt class值。 我想按一下按鈕獲取相應的文本類。

Answer 1

問題是因為您正在選擇所有.txt元素。 相反，你需要使用DOM遍歷找到一個相關的點擊.btnclass元素。 為此，您可以使用prev() ，如下所示：

 $(".btnclass").click(function() { var value = $(this).prev('.txt').val(); console.log(value); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h3>IRCTC Checked Template</h3> <div> <textarea rows="4" cols="50" name="comment" class="txt" form="usrform"> Enter text here...IRCTC Checked Template</textarea> <button class="w3-btn w3-blue w3-border-black w3-card-24 w3-hover-green btnclass" id="btn" name="b">Send</button> </div> <h3>ID Created Template</h3> <div> <textarea rows="4" cols="50" name="comment" class="txt" form="usrform"> Enter text here... ID Created Template</textarea> <button class="w3-btn w3-blue w3-border-black w3-card-24 w3-hover-green btnclass" id="btn" name="b">Send</button> </div> 

要獲取所有.txt值，您可以使用map()構建它們的數組：

 $(".btnclass").click(function() { var values = $('.txt').map(function() { return this.value; }).get(); console.log(values); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h3>IRCTC Checked Template</h3> <div> <textarea rows="4" cols="50" name="comment" class="txt" form="usrform"> Enter text here...IRCTC Checked Template</textarea> <button class="w3-btn w3-blue w3-border-black w3-card-24 w3-hover-green btnclass" id="btn" name="b">Send</button> </div> <h3>ID Created Template</h3> <div> <textarea rows="4" cols="50" name="comment" class="txt" form="usrform"> Enter text here... ID Created Template</textarea> <button class="w3-btn w3-blue w3-border-black w3-card-24 w3-hover-green btnclass" id="btn" name="b">Send</button> </div> 

Answer 2

您可以使用.prev()函數：

$(".btnclass").click(function(){
  alert($(this).prev().val());
});

Answer 3

我建議使用$(this).parent().find('.txt') 。 這將始終在與按下按鈕相同的父對象中選擇.txt元素。

 $(".w3-btn").click(function(){ alert($(this).parent().find('.txt').val()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <textarea rows="4" cols="50" name="comment" class="txt" form="usrform"> Enter text here...IRCTC Checked Template</textarea> <button class="w3-btn w3-blue w3-border-black w3-card-24 w3-hover-green btnclass" id="btn" name="b">Send</button> </div> <h3>ID Created Template</h3> <div> <textarea rows="4" cols="50" name="comment" class="txt" form="usrform"> Enter text here... ID Created Template</textarea> <button class="w3-btn w3-blue w3-border-black w3-card-24 w3-hover-green btnclass" id="btn" name="b">Send</button> </div> 

Answer 4

$(".btnclass").click(function(){
   alert($(this).prev().val());
});