使用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>