我有以下代码:
请参阅此处的 codepen 示例:https ://codepen.io/Rubenkretek/pen/VwYQVgO ? editors = 1111
预期结果:单击“+”按钮时,输入字段增加 1。
实际结果:输入无变化,出现以下错误:
类型错误:selectedInput.stepUp 不是函数
$(function() {
$('<span class="add" uk-icon="plus">+</span>').insertAfter('.product-container .product-quantity input');
$('<span class="sub" uk-icon="minus">-</span>').insertBefore('.product-container .product-quantity input');
$('.add').click(function() {
var selectedInput = $(this).prev('input');
if (selectedInput.val() < 10) {
console.log("value is less than 10");
$('.add').click(function() {
selectedInput.stepUp(1);
});
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-container">
<div class="product-info">
<h2>Product name</h2>
</div>
<div class="product-quantity">
<input type="number"></input>
</div>
</div>
您正在嵌套事件处理程序。只有一个和委托
stepUp 也是一种 DOM 方法,因此您需要从 jQuery 获取 DOM 元素(将 [0] 添加到元素)
注意:type=number 有自己的微调控件
$(function() {
$('<span class="add" uk-icon="plus">+</span>').insertAfter('.product-container .product-quantity input');
$('<span class="sub" uk-icon="minus">-</span>').insertBefore('.product-container .product-quantity input');
$('.product-quantity').on("click", '.add, .sub', function() {
const selectedInput = $(this).closest('div').find('input')[0]; // stepUp is a DOM method
let dir = $(this).is(".add");
selectedInput.stepUp(dir ? 1 : -1);
if (selectedInput.value < 10) {
console.log("value is less than 10");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-container">
<div class="product-info">
<h2>Product name</h2>
</div>
<div class="product-quantity">
<input type="number" />
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句