当前位置: 代码迷 >> JavaScript >> 无法使用jquery从表div中的文本框中获取值
  详细解决方案

无法使用jquery从表div中的文本框中获取值

热度:93   发布时间:2023-06-07 13:43:40.0

我想得到我分配了class =“qty-text”的文本框值。 它可以是多个文本框但是为了简化我的例子,我在这里只使用了一个。 尝试下面的代码,但它返回未定义的值。 请帮助解决这个问题。

 $(document).on('click','.qButton',function(e){ var id="a318d5"; var get_value = $('#a318d5').closest("div.quantity").find("input[class='qty-text']").val(); alert(get_value); }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <table> <tr> <td class="action"><a href="#" id="a318d5" class="remove_cart"><i class="fa fa-times" aria-hidden="true"></i></a></td> <td class="cart_product_img"> <a href="#">Image</a> </td> <td class="cart_product_desc"> <h5>Product</h5> </td> <td> <span> M </span> </td> <td class="price"><span>$320</span></td> <td class="qty"> <div class="quantity"> <input type="number" class="qty-text" step="1" min="1" max="1" name="quantity" value=3> </div> <i class="fa fa-caret-down downarr"></i> </td> <td class="total_price"><span>960</span></td> </tr> </table> <button class="col-xs-12 qButton">select</button> 

代码中的DOM层次结构存在问题。 input.qty-text在当前tr中的另一个td内部(我们甚至无法确切知道,下一个td与否)。 所以,试试这个:

$(document).on('click', '.qButton', function(e) {
  var id="a318d5";
  var get_value = $('#' + id).closest("tr").find("input.qty-text").val();

  alert(get_value);
});

您可以使用子选择器(“父>子”)

 $(document).on('click','.qButton',function(e){ // input[name='Author["+sumClick+"][firstName]'] var id="a318d5"; var get_value = $("quantity > .qty-text ").val(); alert(get_value); }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <table> <tr> <td class="action"><a href="#" id="a318d5" class="remove_cart"><i class="fa fa-times" aria-hidden="true"></i></a></td> <td class="cart_product_img"> <a href="#">Image</a> </td> <td class="cart_product_desc"> <h5>Product</h5> </td> <td> <span> M </span> </td> <td class="price"><span>$320</span></td> <td class="qty"> <div class="quantity"> <input type="number" class="qty-text" step="1" min="1" max="1" name="quantity" value=3> </div> <i class="fa fa-caret-down downarr"></i> </td> <td class="total_price"><span>960</span></td> </tr> </table> <button class="col-xs-12 qButton">select</button> 

尝试这个

 $(document).on('click','.qButton',function(e){ var id="a318d5"; var get_value = $('#a318d5').parents('tr').find("input[class='qty-text']").val(); alert(get_value); }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <table> <tr> <td class="action"><a href="#" id="a318d5" class="remove_cart"><i class="fa fa-times" aria-hidden="true"></i></a></td> <td class="cart_product_img"> <a href="#">Image</a> </td> <td class="cart_product_desc"> <h5>Product</h5> </td> <td> <span> M </span> </td> <td class="price"><span>$320</span></td> <td class="qty"> <div class="quantity"> <input type="number" class="qty-text" step="1" min="1" max="1" name="quantity" value=3> </div> <i class="fa fa-caret-down downarr"></i> </td> <td class="total_price"><span>960</span></td> </tr> </table> <button class="col-xs-12 qButton">select</button> 

  相关解决方案