Question

我的观看代码段是：

<div class="row">
    <div class="col-xs-12 col-md-12">
        <p class="lead">
            $21.000
        </p>
    </div>
    <div class="section col-xs-12 col-md-12" style="padding-bottom:20px;">
        <h6 class="title-attr"><small>Qty</small></h6>
        <div>
            <div class="btn-minus"><span class="glyphicon glyphicon-minus"></span></div>
            <input value="2" class="inputid"/>
            <div class="btn-plus"><span class="glyphicon glyphicon-plus"></span></div>
        </div>
    </div>
    <div class="col-xs-12 col-md-12" >
        <a class="btn btn-success small addToCart">Add to cart</a>
    </div>
</div>

当我尝试使用Jquery获取输入字段的值时，我得到了未定义。他的脚本片段是：

$(document).ready(function () {
    $('.addToCart').click(function() {
        var pos = $(this).parent().find('.inputid').val();
        alert(pos);
    });
});

知道我在这里做错了什么。警报显示未定义。感谢

Answer 1

问题是因为.inputid是parent()元素的兄弟的孩子。要解决此问题，您可以遍历DOM，使用.row然后closest()从find()查找$(document).ready(function() { $('.addToCart').click(function() { var pos = $(this).closest('.row').find('.inputid').val(); console.log(pos); }); });。试试这个：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-xs-12 col-md-12">
    <p class="lead">
      $21.000
    </p>
  </div>
  <div class="section col-xs-12 col-md-12" style="padding-bottom:20px;">
    <h6 class="title-attr"><small>Qty</small></h6>
    <div>
      <div class="btn-minus"><span class="glyphicon glyphicon-minus"></span></div>
      <input value="2" class="inputid" />
      <div class="btn-plus"><span class="glyphicon glyphicon-plus"></span></div>
    </div>
  </div>
  <div class="col-xs-12 col-md-12">
    <a class="btn btn-success small addToCart">Add to cart</a>
  </div>
</div>

Answer 2

然后点击.addToCart按钮，您升级为父div并尝试在此处找到.inputid：

<div class="col-xs-12 col-md-12" >
   <a class="btn btn-success small addToCart">Add to cart</a>
</div>

此处没有.inputid，这就是为什么undefined的结果。

Jquery值未定义

2 个答案: