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

Question

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

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

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

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();

    });
}

Answer 1

for 循环中的这一行无效:

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

发生这种情况是因为当 for 循环结束并且将来发生单击事件时，变量 i 的值始终是最后一个。

您可以更改行(或使用像IIFE或let这样的闭包或添加元素属性):

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

这样，每当您点击“_hide_0”时，您就会切换“_show_0”等等。

代码片段(updated jsfiddle):

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>' + i + '</button>' +
            '<button type="button" class="show_client" id="_show_'+ i
            +'"><i class="fa fa-minus-square-o"></i>' + i + '</button>'

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

    $('#_show_'+i).click(function() {
        var eleId = this.id.replace('show', 'hide');
        console.log("show " + eleId)
        $('#' + eleId).toggle();
    });
    $('#_hide_'+i).click(function() {
        var eleId = this.id.replace('hide', 'show');
        console.log("hide " + eleId)
        $('#' + eleId).toggle();

    });
}

.hide_client,.show_client{
    padding:3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="myButtons">

</div>