Question

I 버튼 클릭으로 접을 수있는 패널 그룹을 동적으로 만들었습니다. 제 질문은 어떻게 생성 된 각 패널에 ID를 생성 할 수 있습니까?

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마다 재설정하고 있습니다 : 여기 내 jQuery 코드입니다. 이를 전역 변수로 만들 수 있고 새 패널을 만드는 함수를 가질 수 있습니다. 함수가 호출 될 때마다 전역 변수를 1 씩 증가시킵니다. 이렇게하면 hash은 매번 재설정되지 않습니다.

var hash = 1; 

function createPanel() { 
    // code to create panel 

    hash++; 
} 

Answer 2

내가 PO의 의견에 말했듯이, 당신이 정의되어 당신의 var hash 버튼을 클릭 할 때마다, 그 경우에 당신이 항상 동일한 ID를 얻을 것이다. 당신이 원하는 것이 아니다 그 이름과 업데이트의 all 클래스를 찾을 수

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

이 코드의 두 개의 선 위에

, 당신은 하나의 당신을 업데이트 할 :

코드에서 더 많은 버그가 있습니다 방금 만들었습니다. 또한

이 라인 :

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>