使用jQuery动态生成每个可折叠面板组的ID

Question

我使用按钮单击动态创建了可折叠面板组，我的问题是如何为每个创建的面板生成ID。 这里是我的jQuery代码：

var panel = '<div class="panel panel-default">'; 
 
    panel += '<div class="panel-heading">'; 
 
    panel += '<h4 class="panel-title">'; 
 
    panel += '<span class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#1">' + $('#queuename').val(); 
 
    panel += '</span>'; 
 
    panel += '</h4>'; 
 
    panel += '</div>'; 
 
    panel += '<div id="1" class="panel-collapse collapse in">'; 
 
    panel += '<div class="panel-body"></div>'; 
 
    panel += '</div>'; 
 
    panel += '</div>'; 
 
    panel += '</div>'; 
 
var hash = 1; 
 
$('#Panelgroup').find(".accordion-toggle").attr("href", "#"+ (++hash)); 
 
$('#Panelgroup').find(".panel-collapse").attr("id",hash); 
 
$('#Panelgroup').append(panel);

Answer 1

你hash 1每次重置。你可以把它变成一个全局变量，并且有一个创建一个新面板的函数。每次调用函数时，只需将全局变量加1即可。这样每次都不会重置hash。

var hash = 1; 

function createPanel() { 
    // code to create panel 

    hash++; 
} 

Answer 2

正如我在PO的评论说，你是定义var hash每个按钮按下的时间，在这种情况下，你总是会得到相同的ID。

有在你的代码更多的bug：

$('#Panelgroup').find(".accordion-toggle").attr("href", "#"+ (++hash)); 
$('#Panelgroup').find(".panel-collapse").attr("id",hash); 

这上面的两个行代码会发现all类的名称和更新这是不是你想要做什么，你要更新的一个你刚创建。

而且这条线：

panel += '<div id="1" class="panel-collapse collapse in">'; 

你不需要特定的id因为它会通过这样的处理：

panel += '<div class="panel-collapse collapse in" id="' + hash + '">'; 

$(document).ready(function() { 
 
    var hash = 1; 
 

 
    $('#btn').on('click', function() { 
 
\t \t console.log('hash-->'+hash); 
 
    var panel = '<div class="panel panel-default">'; 
 
    panel += '<div class="panel-heading">'; 
 
    panel += '<h4 class="panel-title">'; 
 
    panel += '<span class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#' + hash + '">' + $('#queuename').val(); 
 
    panel += '</span>'; 
 
    panel += '</h4>'; 
 
    panel += '</div>'; 
 
    panel += '<div class="panel-collapse collapse in" id="' + hash + '">'; 
 
    panel += '<div class="panel-body"></div>'; 
 
    panel += '</div>'; 
 
    panel += '</div>'; 
 
    panel += '</div>'; 
 
    $('#Panelgroup').append(panel); 
 
    hash++; 
 
    }) 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="Panelgroup">yep</div> 
 
<button id="btn"> 
 
    Create a panel 
 
</button>