单击按钮时提醒输入类型文本的值

Question

我是第一次使用 closest(javascript)，我正在尝试提醒用户输入，其他元素的提醒工作正常，但用户输入的提醒不起作用'没工作

这是 html 和 php

<div class="form-group row my-5">
  <?php
    $sqlb = "SELECT * from products where status ='active' order by availability asc";
    $resultb = $conn->query($sqlb);
    while($rowb = $resultb->fetch_assoc()){
      $id=$rowb['id'];
      $names=$rowb['names'];
      $price=$rowb['price'];
      $image=$rowb['image'];

      $availability=$rowb['availability'];
      $qty=$rowb['qty'];
      $description=$rowb['description'];
  ?>
    <div class="col-sm-3 mb-2 mb-sm-0 my-3">
      <div class="col-sm col-md-12 btn-cart" id="<?php echo $id ?>" style="border:2px solid black; border-radius:5px">
        <div class="" style="text-align:center">
          <img src="../<?php echo $image ?>" alt="" width="100" height="100" style="border-radius:5px;"><br>
          <span class="names"><?php echo $rowb['names']; ?></span><br>
          <span class="price mr-2">₱<?php echo $rowb['price']; ?> </span><br>
          <input type="text" name="" value="<?php echo $qty  ?>" onkeypress='return event.charCode >= 48 && event.charCode <= 57' maxlength="11" class="item_qty">
        </div>

        <button type="button" name="button" id="add" class="btn btn-block btn-primary" width="10em">Add <i class="fa fa-plus"></i> </button>
      </div>
    </div>
  <?php } ?>
</div>

这是我的脚本

$('button#add').click(function() {
  var id = $(this).closest('div.btn-cart').attr('id');
  var item_name = $('div#' + id + ' span.names').text();
  var item_price = $('div#' + id + ' span.price').text();
  var item_pic = $('div#' + id + ' span.image').text();
  var item_qty = $('div#' + id + ' input.item_qty').attr('value');
  if (item_qty <= 0) {
    item_qty = 1;
  }
  alert(item_qty);
  alert(item_name);
  alert(item_price);
  alert(id);
});

只有输入类型="text"的警报（item_qty）不起作用，它只是不断显示来自

的警报“1”

var item_qty = $('div#' + id + ' input.item_qty').attr('value');
if (item_qty <= 0) {
  item_qty = 1;
}

即使我输入“654321”或任何其他数字

Answer 1

您正在访问您用 <input type="text" name="" value="<?php echo 1 ?>" 设置的 value 属性。您要做的是访问 DOM 值：

$('div#' + id + ' input.item_qty').val()

-或-

$('div#' + id + ' input.item_qty').get(0).value

附录

您可以通过其他方式改进您的代码。在许多情况下，您使用的是选择器 'div#' + id，div 不是必需的，并且会减慢 jQuery 查找速度。作为微优化（和更少的代码）考虑在整个代码中进行如下类似更改：

发件人：$('div#' + id + ' input.item_qty')
收件人：$('#' + id).find('input.item_qty')

此外，您可以使用原生 JavaScript 语法而不是 jQuery:

jQuery: $('div#' + id + ' input.item_qty').attr('value')
香草：document.querySelector('#'+id+' input.item_qty').value

重写

$('#add').click(function() {
  let $container = $(this).closest('div.btn-cart');

  let item = {
    name:  $container.find('span.names').text(),
    price: $container.find('span.price').text(),
    pic:   $container.find('span.image').text(),
    qty:   $container.find('input.item_qty').val()
  };

  if (item.qty <= 0)
    item.qty = 1;

  alert(`
    qty:   ${item.qty}
    name:  ${item.name}
    pic:   ${item.pic}
    price: ${item.price}
  `);
});

单击按钮时提醒输入类型文本的值

put on alert the value of input type text when button is clicked

javascript

closest

附录

重写