Question

我通过按钮点击动态创建了一个可折叠的面板组，我的问题是如何为每个创建的面板生成id。这是我的jquery代码：

＆＃13;

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

＆＃13;

Answer 1

您每次都将hash重置为1。您可以将其变为全局变量，并具有创建新面板的功能。每次调用函数时，只需将全局变量递增1.这样hash每次都不会重置。

var hash = 1;

function createPanel() {
    // code to create panel

    hash++;
}

Answer 2

正如我在PO的评论中所说，每次点击按钮时，您都会定义var hash，在这种情况下，您将始终获得相同的ID。

您的代码中存在更多错误：

$('#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() {
		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>

使用jquery动态生成每个可折叠面板组的id

2 个答案: