javascript - 增加输入值 - 我在这里做错了什么?
问题描述
我正在尝试使用 + / - 按钮增加输入的值,但无法弄清楚我的问题是它目前没有做任何事情。任何帮助表示赞赏。我知道 jquery 现在在其 UI 文件中提供微调器功能,但在这种情况下,这是不可能的,而且它不在我的掌控之中。
HTML:
<article class="card card-product-list">
<div class="row no-gutters">
<aside class="col-md-2">
<a href="#" class="img-wrap">
<span class="badge badge-danger"> SOMETHING </span>
<img src="https://image.jpg">
</a>
</aside> <!-- col.// -->
<div class="col-md-7">
<div class="info-main">
<div class="row">
<div class="col-sm-12">
<a href="#" class="h5 title">TEST</a>
<div class="rating-wrap mb-3">
<a href="#" class="h6 title">TEST</a>
</div> <!-- rating-wrap.// -->
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<ul class="productListItm">
<li>
<strong>AWP:</strong> $84.32
</li>
<li>
<strong>WAC:</strong> $13.04
</li>
<li>
<strong>Manufacturer:</strong> TEST
</li>
<li>
<strong>Brand:</strong> TEST
</li>
</ul>
</div>
<div class="col-sm-12 col-md-6">
<ul class="productListItm">
<li>
<strong>Lot:</strong> 369125
</li>
<li>
<strong>Expires:</strong> 04/30/21
</li>
</ul>
</div>
</div>
</div> <!-- info-main.// -->
</div> <!-- col.// -->
<aside class="col-sm-3">
<div class="info-aside">
<a href="#" class="btn-link float-right"> <i class="far fa-heart"></i></a>
<div class="price-wrap">
<span class="price h5"> $4.50 EA/1 </span>
<p>In Stock</p>
</div> <!-- info-price-detail // -->
<br>
<div class="form-group col-md flex-grow-0">
<div class="input-group mb-3 input-spinner">
<div class="input-group-prepend">
<button class="btn btn-light" type="button" id="button-plus"> + </button>
</div>
<input type="text" class="form-control qty" value="1" id="HotQty[A.PROD.NO]" min="0" max="100" step="1">
<div class="input-group-append">
<button class="btn btn-light" type="button" id="button-minus"> − </button>
</div>
</div>
<a href="#" class="btn btn-outline-primary"> <span class="text">Add to cart</span> <i class="fas fa-shopping-cart"></i> </a>
</div>
</div> <!-- info-aside.// -->
</aside> <!-- col.// -->
</div> <!-- row.// -->
</article>
查询:
$(document).ready(function() {
var incrementPlus;
var incrementMinus;
var buttonPlus = $("button#button-plus");
var buttonMinus = $("button#button-minus");
var incrementPlus = buttonPlus.click(function() {
var $n = $(this).parent("div.info-aside").find("input.qty");
$n.val(Number( $n.val() ) + 1 );
});
var incrementMinus = buttonMinus.click(function() {
var $n = $(this).parent("div.info-aside").find("input.qty");
var amount = Number($n.val());
if (amount > 0) {
$n.val(amount - 1);
}
});
});
解决方案
parent()
方法遍历元素的直接父级。
而不是parent()
你应该使用parents()
or closest()
:
$(document).ready(function() {
var incrementPlus;
var incrementMinus;
var buttonPlus = $("button#button-plus");
var buttonMinus = $("button#button-minus");
buttonPlus.click(function() {
var $n = $(this).parents("div.info-aside").find("input.qty");
$n.val(Number( $n.val() ) + 1 );
});
buttonMinus.click(function() {
var $n = $(this).parents("div.info-aside").find("input.qty");
var amount = Number($n.val());
if (amount > 0) {
$n.val(amount - 1);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="card card-product-list">
<div class="row no-gutters">
<aside class="col-md-2">
<a href="#" class="img-wrap">
<span class="badge badge-danger"> SOMETHING </span>
<img src="https://image.jpg">
</a>
</aside> <!-- col.// -->
<div class="col-md-7">
<div class="info-main">
<div class="row">
<div class="col-sm-12">
<a href="#" class="h5 title">TEST</a>
<div class="rating-wrap mb-3">
<a href="#" class="h6 title">TEST</a>
</div> <!-- rating-wrap.// -->
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<ul class="productListItm">
<li>
<strong>AWP:</strong> $84.32
</li>
<li>
<strong>WAC:</strong> $13.04
</li>
<li>
<strong>Manufacturer:</strong> TEST
</li>
<li>
<strong>Brand:</strong> TEST
</li>
</ul>
</div>
<div class="col-sm-12 col-md-6">
<ul class="productListItm">
<li>
<strong>Lot:</strong> 369125
</li>
<li>
<strong>Expires:</strong> 04/30/21
</li>
</ul>
</div>
</div>
</div> <!-- info-main.// -->
</div> <!-- col.// -->
<aside class="col-sm-3">
<div class="info-aside">
<a href="#" class="btn-link float-right"> <i class="far fa-heart"></i></a>
<div class="price-wrap">
<span class="price h5"> $4.50 EA/1 </span>
<p>In Stock</p>
</div> <!-- info-price-detail // -->
<br>
<div class="form-group col-md flex-grow-0">
<div class="input-group mb-3 input-spinner">
<div class="input-group-prepend">
<button class="btn btn-light" type="button" id="button-plus"> + </button>
</div>
<input type="text" class="form-control qty" value="1" id="HotQty[A.PROD.NO]" min="0" max="100" step="1">
<div class="input-group-append">
<button class="btn btn-light" type="button" id="button-minus"> − </button>
</div>
</div>
<a href="#" class="btn btn-outline-primary"> <span class="text">Add to cart</span> <i class="fas fa-shopping-cart"></i> </a>
</div>
</div> <!-- info-aside.// -->
</aside> <!-- col.// -->
</div> <!-- row.// -->
</article>
推荐阅读
- javascript - 将值设置为 var 内部的输入
- java - LocalDateTime.format(DateTimeFormatter) 和 DateTimeFormatter.format(TemporalAccessor) 有什么区别?
- sapui5 - smarttable 请求不必要的后端调用
- c++ - 图像过滤器内核边缘问题(反映边缘值)
- c# - 如何让我的数据库值(使用 MySQL)加载到场景中并可以看到?
- docker - Docker compose 服务无法从 localhost 访问
- python - 如何创建一个充满流程输出的字典?
- bootstrap-4 - 为什么 Bootstrap 4 默认使用 A3 页面大小?
- r - 使用 stat="count" 时将 geom_bar 从高到低重新排序
- php - 有没有办法选择最后一条记录然后用关系过滤?