javascript - 如何使用事件委托增加输入的价值
问题描述
我正在构建一个购物车页面,其中可以增加数量。基于页面的UI设计,我无法使用默认自带的默认增减箭头input number type
。
我能够通过使用 SVG 箭头和样式来实现它。
这是我的代码的方式
{% for item in cart.items %}
...
<div class="cart-quantity-page">
<input type="number" name="updates[]" id="updates_{{ item.key }}" class="Quantity" value="{{ item.quantity }}"
min="1" step="1">
<div class="arrow-cart">
<div class="arrowtopcart">
<svg xmlns="http://www.w3.org/2000/svg" width="10.439" height="10.439" viewBox="0 0 10.439 10.439">
<path id="Path_36640" data-name="Path 36640" d="M7.381,0V7.381H0Z" transform="translate(5.219 10.439) rotate(-135)" fill="#5e00dd"/>
</svg>
</div>
<div class="arrowbtncart">
<svg xmlns="http://www.w3.org/2000/svg" width="10.439" height="10.439" viewBox="0 0 10.439 10.439">
<path id="Path_36641" data-name="Path 36641" d="M7.381,0V7.381H0Z" transform="translate(5.219) rotate(45)" fill="#5e00dd"/>
</svg>
</div>
</div>
</div>
...
{% endfor %}
由于cart-quantity-page
循环多个项目,输入的 id 每个输入都不同
我尝试使用事件委托来获取输入ID,它可以工作,但是当我单击输入本身时
let cartqty = document.getElementById("cartqty")
cartqty.addEventListener("click", function(e) {
console.log(e.target.id)
if(e.target && e.target.classList.contains('arrowbtncart'))
{
console.log(e.target.classList.contains('Quantity'))
console.log('this is bottom arrow')
}
if(e.target && e.target.classList.contains('arrowtopcart'))
{
console.log('this is top arrow')
}
});
我只是为了一种增加/减少使用价值的
input.value
方法.stepUp() or .stepDown()
解决方案
我能够像这样修复它
let cartqty = document.getElementById("cartqty")
cartqty.addEventListener("click", function next(e) {
let ttar = 'updates_' + e.target.id;
let inputvaluee = document.getElementById(ttar)
if (e.target.classList.contains('arrowbtncart')) {
inputvaluee.stepDown()
}
if (e.target.classList.contains('arrowtopcart')) {
inputvaluee.stepUp()
}
推荐阅读
- amazon-web-services - 如何在 lambda 资源中添加将由 AWS SAM 模板中的 API 网关触发的事件
- sql - 根据行的最大值选择列名
- python - Webhook Smartsheet 启用问题
- java - Selenium 与 Java 模块
- powershell - 如何在 Powershell 会话中保持更改?
- logging - 使用 Gelf logback appender 在 Logstash 中创建动态索引
- salesforce - Salesforce 中从演示到实际帐户的设置
- python - 无法在虚拟环境中通过 Jupyter Notebook 连接到 Python
- facebook - 链接到 Facebook 个人资料的网站(2021 年 7 月)
- javascript - 形成多步 javascript 和引导程序