如何通過點擊該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>