我正在更改 Accordion 结构 () 并根据使用 AJAX 的选择来更改它。
问题是,根据 Accordion 文档,我希望它的工作方式如下
<h3>header</h3>
<div><anything></anything></div>
让 h3 填充标题,div 填充主体,但是当我使用 ajax 动态创建它时,它就搞砸了。此代码专门为第一个 Accordion 框使用正确的标题,但正文为空,下一个标题变为“没有打开的 session 窗口...”,这显然不是我想要的。得到的 JSON 在这里:http://benbuzbee.com/trs/json.php?show=sessions&courseid=5
$(function() {
$("#courseselect").change(function () {
$("#testselect").accordion("destroy").html(""); // Empty any previous data
$("#testselect").css("display", "block"); // Display it if it was hidden
$.getJSON('json.php?show=sessions&courseid=' + $(this).val(), function(data) {
for (x in data)
{
$("#testselect").append("<h3><a href=\"#\">" + data[x].name + "</a></h3>");
$("#testselect").append("<div>");
if (!data[x].sessions)
$("#testselect").append("<p>There are no open session windows for this test.</p>");
for (si in data[x].sessions)
{
$("#testselect").append("<a href=registerconfirm.php?sessionid=\""+data[x].sessions[si].uno+"\">"+data[x].sessions[si].location+"</a>");
}
$("#testselect").append("</div>");
}
$("#testselect").accordion();
//$("#testselect").accordion({ change:function(event, ui) { courseid = ui.newHeader.attr("value"); }
}); // End getJSON
}); // end .change
}); // end $()
最佳答案
我认为我发现了一些问题。
你的陈述
$("#testselect").append("<div>")
将向 #testSelect 附加开始和结束标记,如下所示:
<div id='testselect'><h3><a> </a> </h3><div></div> </div>
任何进一步附加到 #testselect 的操作都会在 div 标签之后附加元素。
你的下一个陈述,
$("#testselect").append("<p>There are no open session windows for this test.</p>");
会这样做
<div id='testselect'><h3><a></a></h3><div></div><p> There are no open session windows for this test. </p> </div>
你的陈述
$("#select.").append("</div>")
不会像您想要的那样将结束 div 标签附加到 #testselect 。相反,它什么也不做。
您应该将 for 循环更改为如下所示:
for (x in data)
{
var $header = $("<h3>").appendTo("#testSelect");
$header.append("<a href=\"#\">" + data[x].name + "</a>")
var messageContainer = $("<div>").appendTo($header);
if (!data[x].sessions)
messageContainer.append("<p> There are no open session windows for this test </p>");
for (si in data[x].sessions)
{
messageContainer.append("<a href=registerconfirm.php?sessionid=\""+data[x].sessions[si].uno+"\">"+data[x].sessions[si].location+"</a>");
}
$("#testselect").accordion();
}
关于javascript - JQueryUI Accordion 式重新设计,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4648997/