如何通过点击该div的按钮来获取字段的输入值？

Question

我有多个产品股利按钮具有相同的onlick函数。我想获得输入字段的值点击按钮。两个输入字段和按钮属于同一个div。目前，我正在获得第一个产品onclick任何button.Please帮助

<div class="buy" style="text-align:center;"> 
<span style="margin-right:3px;font-size:14px;" class="Lite_Price">$15.00</span> 

<input type="hidden" maxlength="2" name="qty" class="quantity-wrp" id="itemqty" value="1">  
<input type="hidden" name="prod_id" id="prod_id" value="150"> 
<input type="hidden" name="code" id="code" value="151PM"> 
<input type="button" value="" onclick="promoproduct(this.id)" id="promo_button_1"> 

<div class="buy" style="text-align:center;"> 
<span style="margin-right:3px;font-size:14px;" class="Lite_Price">$20.00</span> 

<input type="hidden" maxlength="2" name="qty" class="quantity-wrp" id="itemqty" value="1">  
<input type="hidden" name="prod_id" id="prod_id" value="151"> 
<input type="hidden" name="code" id="code" value="152PM"> 
<input type="button" value="" onclick="promoproduct(this.id)" id="promo_button_2"> 

function promoproduct(clicked_id){ 

    var qty = $("#itemqty").val(); 
    var prod_id = $("#prod_idprod_id").val(); 
    var code = $("#code").val(); 

Answer 1

已识别rs必须是唯一的。

您应该将当前元素内容this传递给内联点击事件处理程序。您可以使用公共类和各种遍历方法来定位元素。

<input type="button" value="" onclick="promoproduct(this)" id="promo_button_2"> 

然后使用关系使用.parent()/.closest()之后使用.find()

function promoproduct(clickedElem){ 
    var parent = $(clickedElem).closest(".buy"); 
    var qty = parent.find('.quantity-wrp').val(); 
    var prod_id = parent.find('[name="prod_id"]').val(); 
    var code = parent.find('name="code"').val();  
} 

Answer 2

首先，id属性应该是相同的文档中是唯一的目标父buy，所以你可以使用一般的类来代替：

<div class="buy" style="text-align:center;"> 
    <span style="margin-right:3px;font-size:14px;" class="Lite_Price">$20.00</span> 

    <input type="hidden" maxlength="2" name="qty" class="quantity-wrp itemqty" value="1">  
    <input type="hidden" name="prod_id" class="prod_id" value="151"> 
    <input type="hidden" name="code" class="code" value="152PM"> 

    <input type="button" value="" onclick="promoproduct()" id="promo_button_2"> 
</div> 

注意：不需要将参数传递给点击功能promoproduct(this)只是通过this，因此您可以在函数中使用this对象获取当前单击的元素。

你可以使用closest()方法去到父DIV buy然后得到的值：

function promoproduct(clicked_id){ 
    var parent_buy = $(this).closest(".buy"); 

    var qty = parent_buy.find('.quantity-wrp').val(); 
    var prod_id = parent_buy.find('.prod_id').val(); 
    var code = parent_buy.find('.code').val(); 
} 

希望这有助于。

片段避免使用内联事件onclick的：

$('.buy input:button').on('click',function(){ 
 
    var parent_buy = $(this).closest(".buy"); 
 
    
 
    var qty = parent_buy.find('.quantity-wrp').val(); 
 
    var prod_id = parent_buy.find('.prod_id').val(); 
 
    var code = parent_buy.find('.code').val(); 
 

 
    console.log(qty,prod_id,code); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="buy" style="text-align:center;"> 
 
    <span style="margin-right:3px;font-size:14px;" class="Lite_Price">$20.00</span> 
 

 
    <input type="hidden" maxlength="2" name="qty" class="quantity-wrp itemqty" value="1"> 
 
    <input type="hidden" name="prod_id" class="prod_id" value="151"> 
 
    <input type="hidden" name="code" class="code" value="152PM"> 
 

 
    <input type="button" value="Promo product" id="promo_button_1"> 
 
</div> 
 

 
<div class="buy" style="text-align:center;"> 
 
    <span style="margin-right:3px;font-size:14px;" class="Lite_Price">$20.00</span> 
 

 
    <input type="hidden" maxlength="2" name="qty" class="quantity-wrp itemqty" value="2">  
 
    <input type="hidden" name="prod_id" class="prod_id" value="252"> 
 
    <input type="hidden" name="code" class="code" value="255PM"> 
 

 
    <input type="button" value="Promo product" id="promo_button_2"> 
 
</div>

Answer 3

正如您在不同的divs两个按钮，您可以使用parent作为参考，从input得到的值。

此外，当calling function你需要传递this不this.id

<div class="buy" style="text-align:center;"> 
<span style="margin-right:3px;font-size:14px;" class="Lite_Price">$15.00</span> 

<input type="hidden" maxlength="2" name="qty" class="quantity-wrp" id="itemqty" value="1">  
<input type="hidden" name="prod_id" id="prod_id" value="150"> 
<input type="hidden" name="code" id="code" value="151PM"> 
<input type="button" value="" onclick="promoproduct(this)" id="promo_button_1"> 
</div> 

<div class="buy" style="text-align:center;"> 
<span style="margin-right:3px;font-size:14px;" class="Lite_Price">$20.00</span> 

<input type="hidden" maxlength="2" name="qty" class="quantity-wrp" id="Hidden1" value="1">  
<input type="hidden" name="prod_id" id="Hidden2" value="151"> 
<input type="hidden" name="code" id="Hidden3" value="152PM"> 
<input type="button" value="" onclick="promoproduct(this)" id="promo_button_2"> 
</div> 
    <script> 
     function promoproduct(clicked_id) { 

      var parent = $(clicked_id).closest("div.buy"); 
      var qty = $(parent).find("input[name=qty]").val(); 
      var prod_id = $(parent).find("input[name=prod_id]").val(); 
      var code = $(parent).find("input[name=code]").val(); 

     } 
    </script>