JavaScript: 如何以编程方式创建同一函数的单独排列？

Question

我正在尝试为项目列表创建 onclick 事件，这些事件基本上会根据所选的列表项目从不同的信息源获得相同的效果。

function buttonOnclick(whichButton) {
    document.getElementById("dialog0").innerHTML = document.getElementById("dialog" + whichButton.toString());
}

document.getElementById("button1").onclick = function breakerOnclick1() {
    buttonOnclick(1);
}

document.getElementById("button2").onclick = function breakerOnclick2() {
    buttonOnclick(2);
}

document.getElementById("button3").onclick = function breakerOnclick3() {
    buttonOnclick(3);
}

document.getElementById("button4").onclick = function breakerOnclick4() {
    buttonOnclick(4);
}

document.getElementById("button5").onclick = function breakerOnclick5() {
    buttonOnclick(5);
}

我想用 for 循环而不是手动实现这种效果。我知道可能有一种更面向对象或更简单的方法，我想念 JavaScript 的绿色方法。

如何以更编程的方式实现这种影响？

解决方法： 只是想清楚这个问题的答案。以下内容快速可靠地产生正确的结果。尽管如此，我确定下面还有其他相关建议。

for (var i = 1; i < NUM_ENTRIES; i++){
    document.getElementById("button" + i).onclick = function(){
        var replacement = document.getElementById("dialog" + this.id[this.id.length-1]).innerHTML;
        document.getElementById("dialog0").innerHTML = replacement;
    }
}

Answer 1

用 for 循环？

function buttonOnclick(whichButton) {
    document.getElementById("dialog0").innerHTML =  document.getElementById("dialog" + whichButton).innerHTML;
}
for (var i = 1; i < 6; i++) {
    document.getElementById("button" + i).onclick = function (n) {
        return function () {
            buttonOnclick(n);
        }
    }(i);
}

Selected: <strong><span id="dialog0"></span></strong><br>
<button id="button1">1</button> <span id="dialog1">abc</span><br>
<button id="button2">2</button> <span id="dialog2">def</span><br>
<button id="button3">3</button> <span id="dialog3">ghi</span><br>
<button id="button4">4</button> <span id="dialog4">jkl</span><br>
<button id="button5">5</button> <span id="dialog5">mno</span>

Answer 2

这会给你想要的。

function doSomething(id) {
    document.getElementById("dialog0").innerHTML = id;
}

for (let i = 0; i < 5; i++) {
    document.getElementById('button' + i).onclick = function(){
        doSomething(i);
    });
}

Answer 3

开始你不需要命名你的Anonymous function

那你可以使用一个简单的 for 循环吗？

for(var i=0;i<=5;i++){
  document.getElementById("button"+i).onclick = (function(i) {
     return function(){
       buttonOnclick(i);
     })(i); //saving i for later
}

最好的解决办法是做这样的事情

<button data-id="1" class="bar">
<button data-id="2" class="bar">
                 ....

并向 getElementsByClassName("bar") 添加一个事件监听器，并读取 data-id 属性。

Answer 4

与其在函数中硬编码按钮编号，不如从元素中获取它。

for var i = 1; i < 6; i++) {
    document.getElementById("button" + i).addEventListener("click", function () {
        var buttonNum = this.id.replace('button', '');
        buttonOnClick(buttonNum);
    }
}

Answer 5

嗯，首先，将 DOM 元素分配给另一个元素的 innerHTML 只会生成“[object HTMLDivElement]”或类似元素，具体取决于元素。也许你想要

function buttonOnclick(whichButton) {
 document.getElementById("dialog0").innerHTML = document.getElementById("dialog" + whichButton.toString()).outerHTML;
 //which would make the innerHTML be `<div>stuff</div>`
}

至于你的其他问题，只需使用查询，迭代分配，并传递按钮的 ID 号

var buttons = document.querySelectorAll("[id^=button]");
for(var i = 0; i < buttons.length; i++){
 buttons[i].onclick = function(){
  buttonOnclick(this.id[this.id.length-1]);
 };
}

Answer 6

对 forEach 的简单调用可用于遍历按钮。

[].forEach.call(document.getElementsByClassName('dialog-button'), function (el) {
  el.onclick = function () {
    document.getElementById("dialog0").innerHTML = document.getElementById(el.id.replace('button', 'dialog')).innerHTML;
  }
});

div {
  border: 1px dashed blue;
  margin: 10px;
  display: inline-block;
  width: 20px;
}

<div id="dialog0"></div>
<div id="dialog1">1</div>
<div id="dialog2">2</div>
<div id="dialog3">3</div>
<div id="dialog4">4</div>
<div id="dialog5">5</div>

<br />

<button id="button1" class="dialog-button">1</button>
<button id="button2" class="dialog-button">2</button>
<button id="button3" class="dialog-button">3</button>
<button id="button4" class="dialog-button">4</button>
<button id="button5" class="dialog-button">5</button>

JavaScript: 如何以编程方式创建同一函数的单独排列？

JavaScript: How to programmatically create separate permutations of the same function?

javascript

javascript-events