0

这是 xml 文件：-

<root>
<child1 entity_id = "1" value= "Asia">
    <child2 entity_id = "2" value = "india">
        <child3 entity_id = "3" value = "Gujarat">
            <child5 entity_id = "5" value ="Rajkot"></child5>
        </child3>
        <child4 entity_id = "4" value = "Rajshthan">
            <child6 entity_id = "6" value = "Ajmer"></child6>
        </child4>
    </child2>
</child1>
</root>

这是我的 jquery 文件：-

   data = false;
function loadChild(id) {
    var obj = $("#" + id);

    if(obj.data("loaded") == null) {
        ul = "<d>";
        var path = (id == 0) ? "root" : "[entity_id='" + id + "']";

        // Only if it contains children
        if( $(data).find(path).children().length > 0) {
            $("li").hide();
            if($(this).data("loaded") == null) {
            $("#path").text($("#path").text()  + obj.text()+ " => ");
        }
        }

        $(data).find(path).children().each(function(){
            var value_text = $(this).attr('value');
            var id = $(this).attr('entity_id');
            ul += "<li id='" + id + "'>" + value_text + "</li>";
        });

        ul += "</d>";

        $("#" + id).before(ul);
        obj.data("loaded", true);
    } else {
        $("#" + id + " ul").remove();
        //obj.data("loaded", null);
    }
}

 $(document).ready(function() {
     $('#loader').click(function() {
     $(this).hide();
      $.ajax({
             type: "GET",
             url: "try.xml",
             dataType: "xml",
             success: function(xml) {
                data = xml;
                ul = $("<d></d>");
                //loadChild("0");
                $(xml).find('child1').each(function(){
                var value_text = $(this).attr('value');
                var id = $(this).attr('entity_id');
                li=$("<li id='" + id + "'></li>");
                             li.html(value_text);
                             ul.append(li);
                             $(this).unbind('click');
                });
                             ul.appendTo('#firstLevelChild');
    }
         }); //close $.ajax(
     }); //close click(
     $(document).on("click", "li", function(event) {

        event.stopPropagation();
        loadChild($(this).attr("id"), event);
        return false;
 });
 });

这是我的 html 文件：-

<div id="path">
</div>
<div id="1">
<span  id='update-target'>Click here to load value</span>
<ol id="0"></ol>
</div>
<div id="firstLevelChild">
<ol id="0"></ol>
</div>

我的输出是这样的：

<div id="firstLevelChild">
    <ul>
        <li id="1" style="display: none;">Asia</li>
        <ul>
            <li id="2" style="display: none;">india</li>
            <ul>
                <li id="3">Gujarat</li>
                <li id="4">Rajshthan</li>
            </ul>
        </ul>
    </ul>
</div>
<div id="path">  Asia => india => Gujarat =></div><br>

如果我单击 div 路径值中的任何一个，例如 India，那么只有 asia 在路径中显示，
然后印度在另一个 div 上显示

像

<div id="path"> Asia => India => Gujarat =>

如果我点击印度然后输出显示类似这样

<div id="path"> Asia =>
<div id="firstLevelChild">
<d><li id="2"> Inida </li></d>
</div>

类似反向过程的东西
谢谢:)

4

1 回答 1

0

我有一个解决方案给你，但你需要修复你的代码才能让它工作......

工作代码...

HTML

<body>
    <div id="loader">
        <span id='update-target'>Click here to load value</span>
    </div>

    <div id="firstLevelChild"></div>

    <div id="path"></div>
</body>

jQuery

data = false;

$(document).ready(function() {
    $('#loader').click(function() {
        $(this).hide();
        $.ajax({
            type: "GET",
            url: "./final.xml",
            dataType: "xml",
            success: function(xml) {
                data = xml;
                ul = $("<ul></ul>");
                $(xml).find('child1').each(function(){
                    var value_text = $(this).attr('value');
                    var id = $(this).attr('entity_id');
                    li = $("<li id='" + id + "'></li>");
                    li.html(value_text);

                    ul.append(li);
                });       //close each(      
                ul.appendTo('#firstLevelChild');
            }
        }); //close $.ajax(
    }); //close click(

    $(document).on("click", "li", function(event) {
        event.stopPropagation();
        loadChild($(this).attr("id"), false);
        return false;
    });

    $(document).on("click", "span.paths", function(event) {
        event.stopPropagation();
        id = $(this).attr("id").replace("path_","");
        $(this).nextAll("span").remove();
        $(this).remove();
        loadChild(id, true);
        return false;
    });
});

function loadChild(id, path) {
    var obj = $("#firstLevelChild #" + id);

    if(obj.data("loaded") == null || path) {
        ul = "<ul>";
        var path = (id == 0) ? "root" : "[entity_id='" + id + "']";

        // Only if it contains children
        if( $(data).find(path).children().length > 0) {
            $("li").hide();
            $("span #path_" + id).remove();
            p = $("<span id=\"path_" + id + "\" class=\"paths\">" + obj.text() + " => </span>"); 
            $("#path").append(p);
        }

        $(data).find(path).children().each(function(){
            var value_text = $(this).attr('value');
            var id = $(this).attr('entity_id');
            $("#" + id).remove();
            ul += "<li id='" + id + "'>" + value_text + "</li>";
        });

        ul += "</ul>";

        obj.after(ul);
        obj.data("loaded", true);
    } else {
        $("#" + id + " ul").remove();
        obj.data("loaded", null);
    }
}
于 2013-02-02T14:30:40.513 回答