Question

我有这个HTML结构：

a = mypackage.api.createA()
a.test()

b = mypackage.api.createB()
b.test()

我也有这个jquery脚本：

<input type="text" name="quantity" class="form-control quantity" value="1" min="1" max="10" maxlength="2" size="2">

<span class="input-group-btn">
  <button type="button" class="btn btn-default btn-number btn-plus p-l-10 p-r-10">
      <span class="glyphicon glyphicon-plus"></span>
  </button>
</span>

从理论上讲，单击

<script>
    $(document).ready(function(){
        $(document).on("click", ".btn-plus", function() {
            event.preventDefault();
            var quantity = $( this ).closest( ".quantity" ).val();
            alert (quantity);
        });
    });
</script>

后我可以获得输入文本的值，但我仍然会得到btn-plus值。

如何使用undefined获取.quantity的输入值？谢谢

Answer 1

＆＃13;

$(document).ready(function() {
  $(document).on("click", ".btn-plus", function(event) {
    event.preventDefault();
    var quantity = $(this).closest("span").prev().val();//use closest span and prev to get input
    alert(quantity);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="quantity" class="form-control quantity" value="1" min="1" max="10" maxlength="2" size="2">

<span class="input-group-btn">
  <button type="button" class="btn btn-default btn-number btn-plus p-l-10 p-r-10">
      <span class="glyphicon glyphicon-plus">asdasdasdas</span>
</button>
</span>

＆＃13;

使用.closest()范围获取父级范围。由于输入是在跨度之前使用.prev()

Answer 2

.closest()用于查找匹配的祖先元素，在您的情况下，input元素是button父级的前一个兄弟

＆＃13;

$(document).ready(function() {
  $(document).on("click", ".btn-plus", function(event) {
    event.preventDefault();
    var quantity = $(this).parent().prev(".quantity").val();
    alert(quantity);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="quantity" class="form-control quantity" value="1" min="1" max="10" maxlength="2" size="2">

<span class="input-group-btn">
  <button type="button" class="btn btn-default btn-number btn-plus p-l-10 p-r-10">
      <span class="glyphicon glyphicon-plus"></span>
</button>
</span>

＆＃13;

Answer 3

根据JQuery网站，似乎最接近的函数与父函数的行为类似，因为它只查看您所定位的元素的祖先。

https://api.jquery.com/closest/#entry-longdesc

由于输入标签不是按钮标签的父标签，因此最近的功能将找不到它。

利用父和兄弟或类似的组合来定位输入标记。

jQuery .closest无法找到父输入值

3 个答案: