Question

<div id="tagTree1" class="span-6 border"  style='width:280px;height:400px;overflow:auto;float:left;margin:10px; '>
    <a class="tabheader" style="font-size:large">Data Type</a><br />
    <div class="pane">Refine search by Data Type</div>
</div>

以上div（tagTree1）出现在分部广告中。

<div id="newtagTree1" class="span-6 border"  style='width:200px;height:400px;overflow:auto;float:left'>
    <a class="tabheader"><strong>Geographic Location</strong></a><br />
    <div class="pane"><strong>Refine search by geographic location</strong></div>
</div>

newTagTree1分区出现在另一个分区搜索中。但两者都具有相同的功能，可以在其中生成子分区，这些分区是用js文件编写的。所有子分区都在js文件中动态生成。它们都使用相同的函数来生成子div。我在同一页面使用它时遇到问题。如果一个工作正常，那么另一个没有。任何人都可以告诉我我在这方面所犯的错误吗？

提前致谢。

$.getJSON('/api/TagsApi/Children?id=800002', function (data) {
    //$(tagDiv).empty();

    $.each(data, function (i, item) {
        $("#tagTree1").append(tagTabBuilder(item));
    });

    $("#tagTree1").tabs("#tagTree1 div.pane", { api: true, tabs: 'a', effect: 'slide', onClick: buildChildren, initialIndex: 0 });
});


function tagTabBuilder(tagData) {
    var str = "<input type='checkbox' name='tagchkbox[]' value='" + tagData.ID + "' onClick='startQuery()' /><a class='tabheader '>" + tagData.NAME;

    if (tagData.count == 0) {
        str += " (<span class='el_count' id='t" + tagData.ID + "'>" + tagData.count + "</span>)" + "</a><br/>";
    } else {
        str += " (<span class='el_count' id='t" + tagData.ID + "'><strong>" + tagData.count + "</strong></span>)" + "</a><br/>";
    }
    str += "<div id='tid-" + tagData.ID + "' class='pane tag'><!--Loading subtags. . .<img src='/assets/modules/gaiaModule/shared/images/load-small.gif' />--></div>";
    return str;
}

Answer 1

我的猜测是，当他们生成子div时，他们会使用相同的ID方案生成它们。因此，它们中的任何一个都可以自己生成子div，但是当它们都被包含时，就会发生ID冲突。答案是修改子代代码，例如，将父div的id作为子div的id的第一部分。

或者，如果您不需要它们用于javascript的其他部分，请完全保留子div。一般来说，我发现最好避免生成节点中的id属性，而是使用类等。

具有相同ID错误的Div

1 个答案: