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();
});  });

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

这也是传递给我浏览器的输出（verbaitum）：

    <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

问题的原因是你为每个手风琴盒都有这个（简化的）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元素，设置innertext并在追加thisDiv之前将其附加到elem。

动感的手风琴很有趣。处理内容和内容的所有其他元素都未解析。为什么？

1 个答案: