如何獲取HTML表單按鈕與jQuery的數據點擊，但按鈕類和ID是相同的

Question

有2個表單元素我希望得到不同的表單數據在jquery變量上的按鈕點擊請幫助我或告訴我如何獲取數據兩個不同的 字段與獨特的按鈕，但具有相同的id和類。 或者乾脆告訴如何添加到購物車按鈕被添加到每一個產品，並將數據發送回服務器的唯一，

HTML

<form method="get" id="1"> 
    <span class="productname">Product1</span> 
    <span class="price">100</span> 
    <br> Qunatity: 
    <input type="text" name="txt" class="quantity" value="3" class="txti" /> 
    <input type="submit" class="submit" value="submit" /> 
</form> 
<form method="get" id="2"> 
    <span id="productname">Product1</span> 
    <span id="price">100</span> 
    <br> Qunatity: 
    <input type="text" name="txt" class="quantity" value="30" class="txti" /> 
    <input type="submit" class="submit" value="submit" /> 
</form> 

代碼：

$(document).ready(function() { 
    $().click(function() { 
    var txtname = $('.productname').text(); 
    var textprice = $('.price').text(); 
    var quantity = $('.quantity').val(); 
    alert(txtname + " " + textprice + " " + quantity); 
    }); 
}); 



if all elements will be in single <form> tag only like: 
<form method="get" id="1" > 
    <span class="productname">Product1</span> 
    <span class="price">200</span> 
<br>Qunatity:<input type="text" name="txt" class="quantity" value="3"  class="txti"/> 
    <input type="submit" class="submit" value="submit" /> 

<span id="productname">Product2</span> 
<span id="price">100</span> 
<br> 
Qunatity:<input type="text" name="txt" class="quantity" value="30" class="txti"/> 
<input type="submit" class="submit" value="submit" /> 
</form> 

Answer 1

因爲，每個按鈕等細節被放置在不同的形式，你可以這樣使用，

$(".submit").click(function() { 
    var txtname = $(this).closest("form").find('.productname').text(); 
    var textprice = $(this).closest("form").find('.price').text(); 
    var quantity = $(this).closest("form").find('.quantity').val(); 
    alert(txtname + " " + textprice + " " + quantity); 
}); 

$(this).closest("form")將返回當前單擊按鈕的父窗體。

.find()將獲得子元素。

如果你想要的內容被放置在一個單一的形式，然後用這樣的父母DIV包裹內的內容，

<form method="get" id="1"> 
    <div class="container"> 
    <span class="productname">Product1</span> 
    <span class="price">200</span> 
    <br>Qunatity: 
    <input type="text" name="txt" class="quantity" value="3" class="txti" /> 
    <input type="submit" class="submit" value="submit" /> 
    </div> 
    <div class="container"> 
    <span id="productname">Product2</span> 
    <span id="price">100</span> 
    <br> Qunatity: 
    <input type="text" name="txt" class="quantity" value="30" class="txti" /> 
    <input type="submit" class="submit" value="submit" /> 
    </div> 
</form> 

然後代碼會，

$(".submit").click(function() { 
    var txtname = $(this).closest(".container").find('.productname').text(); 
    var textprice = $(this).closest(".container").find('.price').text(); 
    var quantity = $(this).closest(".container").find('.quantity').val(); 
    alert(txtname + " " + textprice + " " + quantity); 
});