如何获取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); 
});