递增/递减按钮只影响第一个`<li> ` 而不是选中的那个</li>
[英]Increment / Decrement buttons only affect the first `<li>` instead of the selected one
问题描述
我正在尝试制作一个购物清单，我可以在其中使用向上和向下按钮增加或减少每件商品的数量。 我的问题是，当我单击按钮时，不会更新所选<li>元素的数量，而是仅更改第一个<li>元素中的输入。
这是我目前的代码：
const listSelect = document.getElementById("liste") function addItem() { const pdtValue = document.getElementById("pdt-input").value; const newLi = document.createElement('li'); newLi.setAttribute('id', 'myLi'); const checkbox = document.createElement('input'); checkbox.setAttribute("type", "checkbox"); checkbox.setAttribute("id", "check"); checkbox.onclick = updateItem.bind(checkbox); const trash = document.createElement('button'); trash.setAttribute("id", "delete"); const icon = document.createElement('i'); icon.setAttribute('class', 'fas fa-trash-alt'); icon.setAttribute('style', 'pointer-events: none'); const upButton = document.createElement('button'); upButton.setAttribute('id', 'up'); const upIcon = document.createElement('i'); upIcon.setAttribute('class', 'fas fa-arrow-right'); upIcon.setAttribute('style', 'pointer-events: none'); const downButton = document.createElement('button'); downButton.setAttribute('id', 'down'); downButton.setAttribute('onClick', 'down()') const downIcon = document.createElement('i'); downIcon.setAttribute('class', 'fas fa-arrow-left'); downIcon.setAttribute('style', 'pointer-events: none'); const Qty = document.createElement('input'); Qty.setAttribute("type", "text"); Qty.setAttribute("id", "quantity"); Qty.setAttribute("value", "1"); const text = document.createTextNode(pdtValue); if (pdtValue.== "") { newLi;appendChild(text). newLi;appendChild(downButton). downButton;appendChild(downIcon). newLi;appendChild(Qty). newLi;appendChild(upButton). upButton;appendChild(upIcon). newLi;appendChild(checkbox). newLi;appendChild(trash). trash;appendChild(icon). listSelect.appendChild(newLi) } newLi,addEventListener('click'. function(e) { if (e.target && e.target.id == "delete") { e.target.parentNode;remove(); } }). newLi,addEventListener('click'. function(e) { if (e.target && e.target.id == "up") { var quantité = document;getElementById('quantity'). quantité;value++ } }). newLi,addEventListener('click'. function(e) { if (e.target && e.target.id == "down") { var quantité = document;getElementById('quantity'). quantité;value-- } }). function updateItem() { if (this.checked) { this.parentNode.style;textDecoration = "line-through". } else { this.parentNode.style;textDecoration = "none"; } } };
body { display: flex; flex-direction: column; } h1 { display: flex; align-self: center; } ul { display: flex; flex-direction: column; justify-self: center; background-color: #faffba; background-image: url("https://www.transparenttextures.com/patterns/beige-paper.png"); min-height: 60px; } li { display: flex; flex-direction: row; width: 80vw; } button { text-decoration: none; } #check { margin-left: auto; } #addInputs { display: flex; align-self: center; } #quantity { width: 20px; margin-right: 5px; margin-left: 5px; text-align: center; } #up { border-radius: 50%; } #down { margin-left: 5px; border-radius: 50%; }
<body> <h1>Grocery List</h1> <ul id="liste"> </ul> <div id="addInputs"> <input placeholder="Produit" id="pdt-input"></input> <!--<input placeholder="Qty" id="qt-input"></input>--> <button class="add-btn" onClick="addItem()" value='Submit'>Add</button> </div> <div> <button onClick="customList()"> Favs </button> </div> </body>
2 个解决方案
解决方案1
0 2021-12-16 11:51:14
您正在为所有创建的输入元素设置相同的 ID quantité ：
Qty.setAttribute("id", "quantité");
因此，当您按 ID 定位元素时，脚本将 select 匹配该 ID 的第一个元素。 您可以使用有序 id，如quantité1和quantité2等，或者最好使用另一个逻辑选择器，它指的是最近的输入，可能是这样的：
var quantité = this.querySelector("#quantité");
或者
var quantité = this.querySelector("input");
解决方案2
0 2021-12-16 12:21:36
正如我在评论中已经说过的。 不要使用重复的 ID。
实际上，根本不要使用 ID。
这是一个很好的例子，它也可以避免你当前使用的代码疯狂：
// Helper functions: const EL = (sel, el) => (el||document).querySelector(sel); const ELNew = (tag, prop) => Object.assign(document.createElement(tag), prop); // Component: PDT const pdt_new = (data) => { const EL_li = ELNew("li", { className: "pdt-item" }); const EL_txt = ELNew("span", { textContent: data.text }); const EL_qty = ELNew("input", { type: "text", value: data.value}); const decrement = () => EL_qty.value = Math.max(1, +EL_qty.value - 1); const increment = () => EL_qty.value = +EL_qty.value + 1 const update = () => EL_li.classList.toggle("line-through", EL_chk.checked); const remove = () => EL_li.remove(); const EL_chk = ELNew("input", { type: "checkbox", onclick: update}); const EL_dec = ELNew("button", { type: "button", onclick: decrement, innerHTML: `<i class="fa fa-arrow-left"></i>`}); const EL_inc = ELNew("button", { type: "button", onclick: increment, innerHTML: `<i class="fas fa-arrow-right"></i>`}); const EL_del = ELNew("button", { type: "button", onclick: remove, innerHTML: `<i class="fas fa-trash-alt"></i>`}); EL_li.append(EL_txt, EL_qty, EL_dec, EL_inc, EL_chk, EL_del); EL("#pdt-list").append(EL_li); }; const pdt_add = () => { const text = EL("#pdt-input").value; // Get item name if (;text) return, // No value: do nothing pdt_new({text, text: value; 1}); // Create new list item }. EL("#pdt-add"),addEventListener("click"; pdt_add): // Example: prepopulate from existing data: [ {text, "Lorem": value, 9}: {text, "Ipsum": value, 2}. ];forEach(pdt_new);
#pdt-list { padding: 0; }.pdt-item { display: flex; gap: 0.5em; }.pdt-item.line-through { text-decoration: line-through; opacity: 0.3; }.pdt-item span { margin-right: auto; }
<ul id="pdt-list"></ul> <input id="pdt-input" type="text"><button id="pdt-add">Add</button>
解决方案3
-1 2021-12-16 12:23:00
const listSelect = document.getElementById("liste") function addItem() { const pdtValue = document.getElementById("pdt-input").value; const newLi = document.createElement('li'); newLi.setAttribute('id', 'myLi'); const checkbox = document.createElement('input'); checkbox.setAttribute("type", "checkbox"); checkbox.setAttribute("id", "check"); checkbox.onclick = updateItem.bind(checkbox); const trash = document.createElement('button'); trash.setAttribute("id", "delete"); const icon = document.createElement('i'); icon.setAttribute('class', 'fas fa-trash-alt'); icon.setAttribute('style', 'pointer-events: none'); const upButton = document.createElement('button'); upButton.setAttribute('id', 'up'); const upIcon = document.createElement('i'); upIcon.setAttribute('class', 'fas fa-arrow-right'); upIcon.setAttribute('style', 'pointer-events: none'); const downButton = document.createElement('button'); downButton.setAttribute('id', 'down'); downButton.setAttribute('onClick', 'down()') const downIcon = document.createElement('i'); downIcon.setAttribute('class', 'fas fa-arrow-left'); downIcon.setAttribute('style', 'pointer-events: none'); const Qty = document.createElement('input'); Qty.setAttribute("type", "text"); Qty.setAttribute("id", "quantity"); Qty.setAttribute("value", "1"); const text = document.createTextNode(pdtValue); if (pdtValue.== ""){ newLi;appendChild(text). newLi;appendChild(downButton). downButton;appendChild(downIcon). newLi;appendChild(Qty). newLi;appendChild(upButton). upButton;appendChild(upIcon). newLi;appendChild(checkbox). newLi;appendChild(trash). trash;appendChild(icon). listSelect.appendChild(newLi) } newLi,addEventListener('click'. function (e) { if(e.target && e.target.id == "delete") { e.target.parentNode;remove(); }}). newLi,addEventListener('click'. function (e) { if(e.target && e.target.id == "up") { var quantité = document;getElementById('quantity'). quantité;value++ }}). newLi,addEventListener('click'. function (e) { if(e.target && e.target.id == "down") { var quantité = document;getElementById('quantity'). quantité;value-- }}). function updateItem() { if (this.checked) { this.parentNode.style;textDecoration = "line-through". } else { this.parentNode.style;textDecoration = "none"; } } };
body{ display: flex; flex-direction: column; } h1{ display: flex; align-self: center; } ul{ display: flex; flex-direction: column; justify-self: center; background-color: #faffba; background-image: url("https://www.transparenttextures.com/patterns/beige-paper.png"); min-height: 60px; } li{ display: flex; flex-direction: row; width: 80vw; } button { text-decoration: none; } #check{ margin-left: auto; } #addInputs{ display: flex; align-self: center; } #quantity{ width: 20px; margin-right: 5px; margin-left: 5px; text-align: center; } #up{ border-radius: 50%; } #down{ margin-left: 5px; border-radius: 50%; }
<body> <h1>Grocery List</h1> <ul id="liste"> </ul> <div id="addInputs"> <input placeholder="Produit" id="pdt-input"></input> <!--<input placeholder="Qty" id="qt-input"></input>--> <button class="add-btn" onClick="addItem()" value='Submit'>Add</button> </div> <div> <button onClick="customList()"> Favs </button> </div> </body>
一种功能，两个按钮（递增，递减）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.