Javascript 按程序使用DOM中的“下一步”和“上一步”按钮创建设置列表

我想创建一个设置列表，用户可以通过javascript程序在HTML中更改这些设置

很像这样：

质量：

-

0

+

我的方法是使用

属性和
prev（）
和
next（）
方法创建一个
选项
类，在其范围内更改值。我正在扩展这个类，所以它可以是一个
范围
，
Bool
，等等。这很好

我的问题是，我似乎无法将其合并到HTML中。我当前的解决方案只适用于创建的最后一个选项，其他选项不会触发
onclick
事件函数，即使它们触发了，我也觉得这不是正确的方法。我怎样才能优雅地完成这项工作

我尝试了所示的解决方案，但它阻止我使用
this
访问类实例

class UIManager {
    constructor (wrapperID, settings) {
        this.wrapper = document.getElementById(wrapperID)
        this.settings = settings
    }
    updateUI () {
        this.wrapper.innerHTML = ``
        for (let id = 0; id < this.settings.options.length; ++id) {
            let option = this.settings.options[id]

            this.wrapper.innerHTML += `
            <li>
                <div class="label">
                    ${option.name}
                </div>
                <div class="option">
                    <input id="prev${id}" class="open" type="button" value="<">
                    ${option.value}
                    <input id="next${id}" class="close" type="button" value=">">
                </div>
            </li>
            `
            let prevButton = document.getElementById(`prev${id}`)
            let nextButton = document.getElementById(`next${id}`)

            prevButton.onclick = _ => {
                this.settings.options[id].prev()
                this.updateUI()
            }
            nextButton.onclick = _ => {
                this.settings.options[id].next()
                this.updateUI()
            }
        }
    }
}

类管理器{
构造函数（包装器ID、设置）{
this.wrapper=document.getElementById（wrapperID）
this.settings=设置
}
updateUI（）{
this.wrapper.innerHTML=``
for（让id=0；id
${option.name}
${option.value}

`
让prevButton=document.getElementById（`prev${id}`）
让nextButton=document.getElementById（`next${id}`）
prevButton.onclick=\u=>{
this.settings.options[id].prev（）
this.updateUI（）
}
nextButton.onclick=\u=>{
this.settings.options[id].next（）
this.updateUI（）
}
}
}
}

尝试使用闭包存储从循环内部创建的函数所需的值

大概是这样的：

prevButton.onclick = (function(settings, updateUI) {
    return function() {
        settings.options[id].prev();
        updateUI();
    };
})(this.settings, this.updateUI); 

nextButton.onclick = (function(settings, updateUI) {
    return function() {
        settings.options[id].next();
        updateUI();
    }
})(this.settings, this.updateUI);

---

尝试闭包来存储从循环内部创建的函数所需的值

大概是这样的：

prevButton.onclick = (function(settings, updateUI) {
    return function() {
        settings.options[id].prev();
        updateUI();
    };
})(this.settings, this.updateUI); 

nextButton.onclick = (function(settings, updateUI) {
    return function() {
        settings.options[id].next();
        updateUI();
    }
})(this.settings, this.updateUI);

只要使用将类实例成员

this

绑定到匿名函数，就可以使用

代码如下所示（使用前面链接的答案作为起点）：

for（var i=0；i

您在评论中提到这不起作用，但它与覆盖innerHTML有关，而不是由于绑定

希望这能提供一个整体的一小部分。

是可用的，只要您使用将类实例成员

this

绑定到匿名函数

代码如下所示（使用前面链接的答案作为起点）：

for（var i=0；i

您在评论中提到这不起作用，但它与覆盖innerHTML有关，而不是由于绑定

---

希望这能提供一个更大的画面的一小部分。

您可以使用在开始时链接到的方法，并且仍然使用该方法引用类实例

this

。此外，我建议使用

（）

作为箭头函数的空参数签名。它更常见于代码中，并且更容易扩展到包含参数而无需修改。@TimKlein经过一些修改后，我发现您的方法工作得很好，但由于每次迭代都会覆盖包装器的innerHTML，因此只保留最后的事件。我改为使用

document.createElement（）

添加DOM元素，从而修复了这个问题。请随意发表您的评论作为回答，这样我就可以接受了。干杯！可以。您可以使用开始时链接到的方法，并且仍然使用该方法引用类实例

this

。此外，我建议使用

（）

作为箭头函数的空参数签名。它更常见于代码中，并且更容易扩展到包含参数而无需修改。@TimKlein经过一些修改后，我发现您的方法工作得很好，但由于每次迭代都会覆盖包装器的innerHTML，因此只保留最后的事件。我改为使用

document.createElement（）

添加DOM元素，从而修复了这个问题。请随意发表您的评论作为回答，这样我就可以接受了。干杯！这个方法的结果是

updateUI（）this

值的闭包中的code>调用，因此在计算

this.wrapper.innerHTML=''

时失败。如何解决这个问题？这种方法会导致

updateUI（）this

值的闭包中的code>调用，因此在计算

this.wrapper.innerHTML=''

时失败。我如何解决这个问题？