Question

这是我的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>

这是我的代码： -

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
<script type="text/javascript" src="jquery.js"></script>
<script>
data = false;
loaded = false;

function loadChild(id) {
    if(!loaded) {
        ul = "<ul>";
        $(data).find("[entity_id='" + id + "']").children().each(function(){
             var value_text = $(this).attr('value');
             var id = $(this).attr('entity_id');

            ul += "<li id='" + id + "'>" + value_text + "</li>";
         });
         ul += "</ul>";
         $("#" + id).append(ul);
         loaded = true;
    }
}

 $(function() {
     $('#update-target a').click(function() {
         $.ajax({
             type: "GET",
             url: "final.xml",
             dataType: "xml",
             success: function(xml) {
                data = xml;
                //console.log(data);
                 $(xml).find('child1').each(function(){
                     var value_text = $(this).attr('value');
                     var id = $(this).attr('entity_id');
                     $("<li id='" + id + "' onclick=\"loadChild('" + id + "');\"></li>")
                         .html(value_text)
                         .appendTo('#update-target ol');
                 }); //close each(
             }
         }); //close $.ajax(
     }); //close click(
 }); //close $(
</script>
   </head>
   <body>
     <p>
       <div id='update-target'>
         <a href="#">Click here to load value</a>
         <ol></ol>
       </div>
     </p>

</body>
</html>

我得到的输出是这样的： -

亚印度

我想要这样的输出： -

如果点击亚洲，则显示印度
如果点击印度然后显示古吉拉特邦和Rajshthan
如果点击Gujarat然后显示Rajkot
如果点击Rajshthan然后显示Ajemr

Answer 1

首先，如果您想要不断点击子值，则需要在每个子列表项上添加 loadChild 函数作为click事件。所以，而不是这一行

ul += "<li id='" + id + "'>" + value_text + "</li>";

你需要这一行

ul += "<li id='" + id + "' onclick=\"loadChild('" + id + "');\">" + value_text + "</li>";

然而，这导致了下一个问题。您正在使用全局变量已加载来检查是否已读取XML。但是一旦设置为true（点击india），那么loadChild函数将不会执行任何其他操作。您确实需要跟踪每个单独子项的已加载值。您可以在此处使用jquery数据函数，例如

var obj = $("#" + id);
if(obj.data("loaded") == null)
{
   // Load data
}
obj.data("loaded", true);

请注意，您需要避免的另一件事是，在单击子元素时，您希望避免父点击的onclick事件（这可能是因为子元素嵌入在父元素 li <中/ strong>）元素，因此您需要告诉浏览器不要冒出点击事件。

event.cancelBubble = true;

最后，为了简化代码，您实际上可以获得更新目标的点击处理程序来调用 loadChild 函数，但使用'dummy' id为0的元素。

请尝试使用以下代码：

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="jquery.min.js"></script> <script> data = false; function loadChild(id) { var obj = $("#" + id); if(obj.data("loaded") == null) { ul = "<ul>"; var path = (id == 0) ? "root" : "[entity_id='" + id + "']"; $(data).find(path).children().each(function(){ var value_text = $(this).attr('value'); var id = $(this).attr('entity_id'); ul += "<li id='" + id + "' onclick=\"loadChild('" + id + "');\">" + value_text + "</li>"; }); ul += "</ul>"; $("#" + id).append(ul); obj.data("loaded", true); event.cancelBubble = true; } } $(function() { $('#update-target a').click(function() { $.ajax({ type: "GET", url: "final.xml", dataType: "xml", success: function(xml) { data = xml; loadChild("0"); } }); //close $.ajax( }); //close click( }); //close $( </script> </head> <body> <p> <div id='update-target'> <a href="#">Click here to load value</a> <ol id="0"></ol> </div> </p> </body> </html>

使用ajax获取所有子子属性值

1 个答案: