Question

我有多个产品div，按钮具有相同的onlick功能。我想在点击按钮时获取输入字段的值。两个输入字段和按钮属于同一个div。目前我正在获得非常第一个产品的值点击任何按钮。请帮助

...
ViewBag.Title = "Test"
...
@Html.DropDownListFor(x => x.Title, CertificateFormHelpers.GenerateTitles(), new {@class = "form-select"})

@Html.DropDownListFor(x => x.Country, Countries.All(), new { @class = "form-select" })

<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">

Answer 1

标识符必须是唯一的。

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

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

然后使用buy

使用.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属性在同一文档中应该是唯一的，因此您可以使用常规类：

<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 [{1}}，然后获取值：

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);
});

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>

如何在点击该div的按钮时获取字段的输入值？

3 个答案: