javascript - JQueryUI Accordion 重新设计

我正在更改手风琴的结构（），并根据使用AJAX的选择对其进行更改。

问题是，根据手风琴文档，我希望它能像

<h3>header</h3>
<div><anything></anything></div>

使h3成为标头，使div成为正文，但是当我使用ajax动态创建它时，它就搞砸了。这段代码专门为第一个手风琴盒使用了正确的标题，但是主体为空，下一个标题为“没有打开的会话窗口...”，这显然不是我想要的。得到的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/