javascript - 动态 Accordion 很有趣。所有其他元素都被视为内容，并且内容未被解析。为什么？

Question

我有以下代码:

$(document).ready(function() {
    function genDiv () {
        var i = document.getElementById("teacher_num").value; // returns fine
        var thisDiv = document.getElementById("effect"); // the div I'm stuffing this accordion into
        for (var num = 1; num <= i; num++) { // generate an accordion with as many elements in it as variable i
            var elem = document.createElement('div'); // generates just fine
            elem.id  = 'teacher' + num; // also fine
          elem.innerHTML = '<h3> Teacher ' + num + ' </h3> \n <div> \n <p> <input type="text" name="teacher_name' + num + '" id="teachername' + num + '" /> </p> \n </div>'; // the first accordion element generates then it takes the <h3> of the second one and treats it as if it's the content of the first.  !!!                                                                                                     
            document.getElementById("effect").appendChild(elem); // runs fine
        }
        $("#effect").accordion();  // runs fine?  
    } // end genDiv       

$("#foo").click(function(){
            $("#effect").css("margin-top", "10%").show("blind", {direction: "horizontal"}, 400);
            genDiv();
});  });

正如评论中提到的，这会生成“Teacher 1”作为第一个 <h3>然后输入 <h3> Teacher 2 </h3>到第二个元素的内容 div 中。为什么会发生这种情况以及如何解决它？是否错误地构建了 HTML 字符串？这是我做错的 JQuery 事情吗？

这也是传递给我的浏览器的输出(逐字):

    <div id="effect" style="background-color: transparent; float: right; height: 400px; width: 400px; display: block; margin-top: 10%;" class="ui-accordion ui-widget ui-helper-reset" role="tablist">
        <div id="teacher1" class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-accordion-header-active ui-state-active ui-corner-top" role="tab" aria-controls="teacher2" aria-selected="true" aria-expanded="true" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>
<h3> Teacher 1 </h3> 
     <div> 
         <p> <input type="text" name="teacher_name1" id="teachername1"> </p> 
     </div>
   </div>
    <div id="teacher2" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" aria-labelledby="teacher1" role="tabpanel" aria-hidden="false" style="display: block; height: 400.79999923706055px;">
<h3> Teacher 2 </h3> 
     <div> 
         <p> <input type="text" name="teacher_name2" id="teachername2"> </p> 
     </div>
   </div>
     <div id="teacher3" class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-top" role="tab" aria-controls="ui-accordion-effect-panel-1" aria-selected="false" aria-expanded="false" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
<h3> Teacher 3 </h3> 
     <div> 
         <p> <input type="text" name="teacher_name3" id="teachername3"> </p> 
     </div>
   </div>
</div>

Answer 1

问题的原因是每个 Accordion 框都有以下(简化的)HTML 结构:

<div>
    <h3></h3>
    <div>
       <p><input /></p>
    </div>
</div>

您真正需要的是:

<h3></h3>
<div>
   <p><input /></p>
</div>

我所做的是使用 jQuery 来简化 HTML 构建并使其更易于管理，同时解决根本问题。这是新的 genDiv 函数:

function genDiv() {
    var i = document.getElementById("teacher_num").value,
        $effect = $("#effect");

    for (var num = 1; num <= i; num++) {

        var $inner = $('<p />').append( $('<input />', { 
                        type: 'text', 
                        name: 'teacher_name' + num, 
                        id: 'teachername' + num 
                    }) );

        $('<h3 />', { text: 'Teacher ' + num }).appendTo($effect);
        $('<div />', { id: 'teacher' + num }).append( $inner ).appendTo($effect);

    }
     $("#effect").accordion();
}      

p 标记是多余的，但我添加它是为了保持原始结构。要删除它，请将 $inner 变量更改为:

var $inner = $('<input />', { 
                 type: 'text', 
                 name: 'teacher_name' + num, 
                 id: 'teachername' + num 
             });

这里正在工作:http://jsfiddle.net/BDGCV/

当然，你完全可以用纯 JavaScript 来做这件事。只需创建一个 h3 元素，设置内部文本并将其附加到 thisDiv，然后再附加 elem。