Javascript 单击时的动态按钮事件仅适用于最后一个按钮

我试图隐藏一个div，当按下相应的按钮时，它的内容被切换。似乎有很多方法可以添加点击事件，但每一种对我有效的方法只适用于列表中的最后一个按钮

按原样创建一个包含10个按钮的列表，运行时只有最后一个按钮显示其隐藏文本。单击时，其余按钮似乎没有任何操作或错误。注释掉的是其他试图让它工作的尝试

// ==UserScript==
// @name        ToggleDivPlz
// @namespace   ToggleDivPlz
// @include     */mypage.html
// @version     1
// @grant       none
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
// ==/UserScript==
function ToggleDiv(sToggleDiv) {
  console.log('in ToggleDiv and is ' + sToggleDiv.replace('btn', 'div'));
  var thisdiv = document.getElementById(sToggleDiv.replace('btn', 'div'));
  if (thisdiv.style.display == 'block')
  thisdiv.style.display = 'none';
   else
  thisdiv.style.display = 'block';
}
for (i = 0; i < 10; i++)
{
  //create a button and div with paired names
  document.body.innerHTML = document.body.innerHTML +
  '<button id="btn' + i + '">Show/Hide div' + i + '</button>' +
  '<div class="mydivs" id="div' + i + '" style="display:none">This text starts hidden, but the button shows it.</div><br /><br />';

  //The last element gets this onclick. All previous elements are not set correctly.
  document.getElementById("btn" + i).onclick = (function() {
    ToggleDiv(this.id);
  });

  //doing onclick via the button's text creation throws the error that the method raised doesn't exist. :(
  //document.body.innerHTML = document.body.innerHTML +
  //'<button id="btn' + i + '" onclick="ToggleDiv(this.id);">Show/Hide div' + i + '</button>' +
  //'<div class="mydivs" id="div' + i + '" style="display:none">This text starts hidden, but the button shows it.</div><br /><br />';

  //various degrees of similarly wrong to really wrong
  //document.getElementById("btn" + i).on('click', 'button', function() {ToggleDiv(this.id)});
  //document.getElementById("btn" + i).on('click', 'button', console.log('I am ' + this.id));
  //document.getElementById("btn" + i).onclick = function() { ToggleDiv(this.id);  }
  //document.getElementById("btn" + i).addEventListener ( "click", ToggleDiv, this.id );
}

/==UserScript==
//@name ToggleDivPlz
//@namespace-ToggleDivPlz
//@include*/mypage.html
//@version 1
//@grant none
//@需要http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
//==/UserScript==
功能切换DIV（sToggleDiv）{
console.log（'in ToggleDiv and is'+sToggleDiv.replace（'btn'，'div'））；
var thisdiv=document.getElementById（sToggleDiv.replace（'btn'，'div'）；
if（thisdiv.style.display=='block'）
thisdiv.style.display='none'；
其他的
thisdiv.style.display='block'；
}
对于（i=0；i<10；i++）
{
//创建具有成对名称的按钮和div
document.body.innerHTML=document.body.innerHTML+
“显示/隐藏分区”+i+“”+
'此文本开始隐藏，但按钮显示。

；
//最后一个元素获得此onclick。之前的所有元素都未正确设置。
document.getElementById（“btn”+i）.onclick=（function（）{
ToggleDiv（this.id）；
});
//通过按钮的文本创建执行onclick会抛出引发的方法不存在的错误：(
//document.body.innerHTML=document.body.innerHTML+
//“显示/隐藏分区”+i+“”+
//'此文本开始隐藏，但按钮显示。

；
//不同程度的类似错误到真正错误
//getElementById（“btn”+i）.on（'click'，'button'，function（）{ToggleDiv（this.id）}）；
//document.getElementById（“btn”+i）.on（'click'，'button'，console.log（'i am'+this.id））；
//document.getElementById（“btn”+i）.onclick=function（）{ToggleDiv（this.id）；}
//document.getElementById（“btn”+i）.addEventListener（“单击”，切换div，this.id）；
}

罪魁祸首是以下陈述：

document.body.innerHTML = document.body.innerHTML +
  '<button id="btn' + i + '">Show/Hide div' + i + '</button>' +
  '<div class="mydivs" id="div' + i + '" style="display:none">This text    starts hidden, but the button shows it.</div><br /><br />';

---

将您的代码更改为此代码已在我的本地

function ToggleDiv(sToggleDiv) {
  console.log('in ToggleDiv and is ' + sToggleDiv.id.replace('btn','div'));
  var thisdiv = document.getElementById(sToggleDiv.id.replace('btn', 'div'));
  if (thisdiv.style.display == 'block')
    thisdiv.style.display = 'none';
  else
    thisdiv.style.display = 'block';
}
for (i = 0; i < 10; i++)
{
//create a button and div with paired names`enter code here`
document.body.innerHTML = document.body.innerHTML +
'<button id="btn' + i + '" onclick="ToggleDiv(this)">Show/Hide div' + i + '</button>' +  '<div class="mydivs" id="div' + i + '" style="display:none">This text starts hidden, but the button shows it.</div><br /><br />';
}

功能切换div（sToggleDiv）{
log（'in ToggleDiv and is'+sToggleDiv.id.replace（'btn'，'div'））；
var thisdiv=document.getElementById（sToggleDiv.id.replace（'btn'，'div'）；
if（thisdiv.style.display=='block'）
thisdiv.style.display='none'；
其他的
thisdiv.style.display='block'；
}
对于（i=0；i<10；i++）
{
//创建一个带有成对名称的按钮和div`在此处输入代码`
document.body.innerHTML=document.body.innerHTML+
'Show/Hide div'+i+'+'此文本开始隐藏，但按钮会显示它。

；
}

由于我的实际代码放置这些按钮/按钮组合的位置是动态的，取决于用户所在的页面，我发现运行两次for循环最简单。第一次替换所有按钮/按钮的位置，然后第二次在div中放置单击和内容。感谢您的帮助lleaff。我现在要继续我的项目。^。^@Aki这听起来是正确的方法。你应该将影响页面布局的代码放在顶部，以尽可能避免回流：。不客气：）这对javascript非常有效。唉，因为我在Greasemonkey中，页面不知道ToggleDiv是什么，因为该函数是在GM userscript中定义的，而不是在页面上定义的。我的第一个大型注释for循环注意到尝试进行内联onclick声明。

function ToggleDiv(sToggleDiv) {
  console.log('in ToggleDiv and is ' + sToggleDiv.id.replace('btn','div'));
  var thisdiv = document.getElementById(sToggleDiv.id.replace('btn', 'div'));
  if (thisdiv.style.display == 'block')
    thisdiv.style.display = 'none';
  else
    thisdiv.style.display = 'block';
}
for (i = 0; i < 10; i++)
{
//create a button and div with paired names`enter code here`
document.body.innerHTML = document.body.innerHTML +
'<button id="btn' + i + '" onclick="ToggleDiv(this)">Show/Hide div' + i + '</button>' +  '<div class="mydivs" id="div' + i + '" style="display:none">This text starts hidden, but the button shows it.</div><br /><br />';
}