Question

我试图用Jquery动态添加按钮，现在对于每个按钮，我想执行不同的动作，我该如何实现呢？执行操作后，每个按钮都会切换 e.g。

点击后显示1成为hide1
点击后显示2变为hide2
点击后显示3变为hide3

我创建了一个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循环结束并且将来发生click事件时，变量i的值始终是最后一个。

您可以更改自己的行（或使用IIFE或let之类的闭包或添加元素属性）：

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

这样每当你点击＆＃34; _hide_0＆＃34;你将切换＆＃34; _show_0＆＃34;等等。

代码段（updated jsfiddle）：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我用一行来编辑Gaetano的答案来隐藏并显示按钮一旦点击我更新了JS小提琴： JSFiddle

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

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

2 个答案: