将面板动态添加到 Bootstrap 3 手风琴

Question

我正在尝试将 Bootstrap 3 面板动态添加到手风琴。我的（相关）代码如下：

<div class="panel-group" id="queues-accordion">
</div>

和JS代码：

$("#addqueuebutton").on("click",function(){
    var queue = '<div class="panel panel-default">';
    queue += '<div class="panel-heading">';
    queue += '<h4 class="panel-title">';
    queue += '<a data-toggle="collapse" data-parent="queues-accordion" href="collapse1">' + $('#queuename').val() + '</a>';
    queue += '</a>';
    queue += '</h4>';
    queue += '</div>';
    queue += '<div id="collapse1" class="panel-collapse collapse in">';
    queue += '<div class="panel-body">' + This is a test + '</div>';
    queue += '</div>';
    queue += '</div>';
    $('#queues-accordion').append(queue);
})

我遵循了本指南 - Add dynamic closed panels in Bootstrap 3 accordion，但我没有让面板出现在页面上。谁能指出我的错误？

Answer 1

以下行无效

queue += '<div class="panel-body">' + This is a test + '</div>';

This is a test 是一个字符串，应该像字符串一样添加。 Javascript 会将其解释为变量（同样无效）。

这样的东西应该可以代替

queue += '<div class="panel-body">This is a test</div>';

或将This is a test 存储为变量并将其连接起来

var test = 'This is a test';
queue += '<div class="panel-body">' + test + '</div>';