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>

これは私のコードです：-

<!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>

私はこのような出力を得ました：-

アジアインド

私はこの出力のようなものが欲しいです：-

アジアをクリックした
場合はインドを表示しますインドをクリックした場合はグジャラートとラジシュタンを表示しますグジャラートを
クリックした
場合はラジコットを表示しますラジシュタンをクリックした場合はアジュメールを表示します

4

1 に答える 1

0

まず、子の値を継続的にクリックする場合は、loadChild関数を各子リストアイテムのクリックイベントとして追加する必要があります。したがって、この行の代わりに

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

この行が必要です

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

しかし、これは次の問題につながります。ロードされたグローバル変数を使用して、XMLがすでに読み取られているかどうかを確認しています。ただし、これがtrueに設定されると（インドをクリックした場合）、loadChild関数は他に何もしません。個別の子ごとにロードされた値を追跡する必要があります。たとえば、ここでjqueryデータ関数を利用できます。

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

避ける必要があるもう1つのことは、子要素をクリックするときに、親が起動するonclickイベント（子要素が親のli内に埋め込まれているために発生する可能性があります）要素を避けたいということです。クリックイベントをバブルしないようにブラウザに指示する必要があります。

event.cancelBubble = true;

最後に、コードを少し単純化するために、実際にはupdate-target aのクリックハンドラーを取得してloadChild関数を呼び出すことができますが、IDが0の「dummy」要素を使用します。

代わりに次のコードを試してください。

<!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>
于 2013-01-23T09:15:43.730 に答える