Question

我想写一个动态按钮创建器。所以我有html文件

<body>
    <button id="0" type="button" onclick="create_button(0)">Create button 1</button>
</body>

和js文件“模拟”正确的操作

var counter = 0;

function create_button(n) {

    /*Shift up*/
    for (i=counter; i>n; i--) {
        document.getElementById(i).id = i+1;
        document.getElementById(i+1).innerHTML = i+1;
    };

    /*Create new button*/
    var new_button = document.createElement("Button");
    new_button.innerHTML = n+1;
    new_button.type = "button";
    new_button.id = n+1;
    function helper() {
        create_button(n+1);
    };
    new_button.addEventListener('click', helper );

    document.body.insertBefore(new_button,document.getElementById(n).nextSibling);

    counter++;
};

但/*Shift up*/部分仅更改按钮的id和innerHTML，而不是click的操作。所以为了解决这个问题，我需要在/*Shift up*/中添加两行，这些行应该作为

document.getElementById(i+1).addEventListener('click', helper(i+1) );
document.getElementById(i+1).removeEventListener('click', helper(i) );

显然它不起作用。由于create_button函数的递归性质，我认为helper应该移到create_button之外。但我不知道该怎么做。

一些额外的信息我简化了代码，但实际上按钮有一些依赖于n的附加功能。假设我们也想提醒按钮的位置。所以我们将助手改为

function helper() {
    create_button(n+1);
    alert(n+1);
};

请参阅https://jsfiddle.net/o3Lsttyq/3/警告说的内容。点击例如1,1,3。

Answer 1

由于您正在调整id以便它始终与当前索引匹配而您的函数helper想要相同的索引，所以您需要做的就是移动helper函数把它改成像：

function helper(){
  var n1 = this.id; // effectively "n+1"
  alert(n1);
}

您无需使用该参数调用create_button，因为您想要的数据可以从this中撤出。

（另外，你不应该使用id属性来代替那种东西。你应该使用here描述的data-前缀属性。同样，重构使用this代替使用getElementById()意味着您可以不再需要跟踪元素的索引。）

重构乐趣：

<body>
    <button type="button">Create button 1</button>
</body>

function create_button(){
  var index = (this.innerHTML|0) + 1;
  var new_button = document.createElement("button");
  new_button.type = "button";
  new_button.addEventListener('click',create_button);
  document.body.insertBefore(new_button,this.nextSibling);

  var target = new_button;
  while(target) {
    target.innerHtml = index;
    target = target.nextSibling;
    index += 1;
  }
}
document.body.getElementsByTagName("button")[0].addEventListener('click',create_button);

递归函数和removeEventListener

1 个答案: