Javascript 动态添加多个按钮，并在jquery中添加每个单击处理程序

我正在尝试使用Jquery动态添加按钮，现在对于每个按钮，我想执行不同的操作，如何实现它？执行操作后，每对按钮都将切换 e、 g

• 单击变为隐藏1后显示1
• 单击变为隐藏后显示2
• 单击变为隐藏3后显示3

我创建了一个展示我迄今为止所取得成就的网站

var randomMeetings = Math.floor(Math.random() * 10) + 1;


for(var i = 0; i < randomMeetings; i++){
    var expandClient = '<button type="button" class="hide_client" id="_hide_'+ i +'"><i     class="fa fa-plus-square-o"></i></button><button type="button" class="show_client" id="_show_'+ i +'"><i class="fa fa-minus-square-o"></i></button>'

    $('#myButtons').append(expandClient);

}

for (var i = 0; i < randomMeetings; i++){

    $('#_show_'+i).click(function() {
        $('#_hide_'+i).toggle();       
    });
    $('#_hide_'+i).click(function() {
        $('#_show_'+i).toggle();

    });
}

var randomeetings=Math.floor（Math.random（）*10）+1；
对于（变量i=0；i<0；i++）{
var expandClient=''
$（“#我的按钮”）.append（expandClient）；
}
对于（变量i=0；i<0；i++）{
$（'.#_show.'+i）。单击（函数（）{
$（'.#_hide.'+i）.toggle（）；
});
$（'.#_hide'+i）。单击（函数（）{
$（'.#_show.'+i）.toggle（）；
});
}

for循环中的这一行无效：

$('#_hide_'+i).toggle();

这是因为当for循环结束并且将来发生click事件时，变量i的值总是最后一个

您可以在中更改行（或使用类似或的闭包，或添加元素属性）：

因此，无论何时单击“\u hide\u 0”，您都将切换“\u show\u 0”等等

代码段（）：

var randomeetings=Math.floor（Math.random（）*10）+1；
对于（变量i=0；i<0；i++）{
var expandClient=''+i+''+
“+i+”
$（“#我的按钮”）.append（expandClient）；
$（'.#_show.'+i）。单击（函数（）{
var eleId=this.id.replace（'show'，'hide'）；
console.log（“show”+eleId）
$（'#'+eleId）.toggle（）；
});
$（'.#_hide'+i）。单击（函数（）{
var eleId=this.id.replace（'hide'，'show'）；
console.log（“隐藏”+eleId）
$（'#'+eleId）.toggle（）；
});
}

.hide\u client、.show\u client{
填充：3em；
}

---

我用一行编辑了Gaetano的答案，以隐藏和显示按钮。单击后，我更新了JS小提琴：

---

这里有一个方法：谢谢你！这几乎就是我要寻找的，在摆弄之后，我仍然无法在单击后隐藏按钮（例如，如果我单击一个按钮，它将消失，只显示第二个按钮，单击此按钮后，它将消失并显示第一个按钮）。我想到的唯一解决办法是使用$（'###u hide'+i）.show（）；和$（'u#u hide_'+i）.hide（）；但正如您所提到的，它在for循环中不起作用。还有别的解决办法吗？我刚知道怎么做

$('#' + this.id.replace('hide', 'show')).toggle();

$(this).css('display', 'none');