使用JavaScript顯示特定的XML數據

Question

堆棧溢出的朋友你好

我可以從XML文件中獲取特定數據，但是我有一個問題。 僅當章節ID為1或2時，如何才能獲得“子章節”數據？

這是我的XML代碼：

<?xml version="1.0" encoding="utf-8" ?>
<chapters module="TALLER DE COMPROMISO ORGANIZACIONAL" img="fondoprincipal.jpg">
    <chapter id="1" title="Presentación Curso" img="img_chapter4.jpg" frase="">
        <subchapter id="1" title="Bienvenidos">
            <pag id="1" img="logoeconomia2.jpg" />
        </subchapter>
        <subchapter id="2" title="Instrucciones para ingresar al Taller">
            <pag id="1" img="instrucciones.jpg"/>
        </subchapter>
        <subchapter id="3" title="Instrucciones para estudiar este Taller">
            <pag id="1" img="instrucciones-3.jpg"/>
            <pag id="2" img="instrucciones-2.jpg"/>
            <pag id="3" img="foro.jpg"/>
        </subchapter>
        <subchapter id="4" title="Controles del curso">
            <pag id="1" img="controles.jpg" />
        </subchapter>
        <subchapter id="5" title="Tutorías del Taller">
            <pag id="1" img="e-learning.jpg"/>
        </subchapter>
        <subchapter id="6" title="Programación del Taller">
            <pag id="1" img="calendario.jpg"/>
        </subchapter>
        <subchapter id="7" title="Descripción del Taller">
            <pag id="1" img="descripcioncurso.jpg"/>
        </subchapter>
        <subchapter id="8" title="Objetivo General del Taller">
            <pag id="1" img="objetivo_general.jpg"/>
        </subchapter>
    </chapter>

    <chapter id="2" title="El Compromiso Organizacional" img="img_chapter3.jpg" frase="“Cuando alguien ama lo que hace se nota.
Cuando no amas lo que haces, se nota aún más”
Steve Jobs">
        <subchapter id="1" title="Objetivos de Aprendizaje"  >
            <pag id="1" img="objetivo_c1.jpg"/>
        </subchapter>
        <subchapter id="2" title="Aportes del Funcionario a la Misión Institucional"  >
            <pag id="1" img="generacion_valor_1.jpg"/>
        </subchapter>
        <subchapter id="3" title="Expresiones del Compromiso Organizacional">
            <pag id="1" img="responsabilidad_1.jpg"/>
        </subchapter>
        <subchapter id="4" title="Compromiso Organizacional y Servicio Público" >
            <pag id="1" img="comp_sp_1.jpg"/>
            <pag id="2" img="comp_sp_2.swf"/>
            <pag id="3" img="comp_sp_3.jpg"/>
        </subchapter>
        <subchapter id="5" title="Bases del Compromiso Organizacional" >
            <pag id="1" img="Base_Comp.swf"/>
        </subchapter>
    </chapter>
</chapters>

這是我的JavaScript代碼，包含在PHP文件中。 使用此代碼，我可以解析特定的數據，在這種情況下，我可以從章節中獲取“ img”和“ title”屬性，但是如果章節的ID為“ 1”或“ 2”，則無法獲得子章節數據。

<script>
    var ruta = '<?php echo "http://".$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"]; ?>';
  camino = ruta.replace("chapter.php", "data/chapter.xml");
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
      if (xhttp.readyState == 4 && xhttp.status == 200) {
      myFunction(xhttp);
      }
  };
  xhttp.open("GET", camino, true);
  xhttp.send();

  function myFunction(xml) {
      var x, y, i, xmlDoc, txt, id_capitulo;

      xmlDoc = xml.responseXML;
      id_capitulo = <?php echo $id_capitulo; ?>;
      txt_img = "";
      txt_id = "";
      txt_2 = "";
      y = xmlDoc.getElementsByTagName('capitulo');
      for (i = 0; i < y.length; i++) {
        txt_id = y[i].getAttribute('id');
        if(txt_id == id_capitulo){

            txt_img = y[i].getAttribute('img');
            img = ruta.replace("chapter.php", "images/"+txt_img);
            document.getElementById("imagen_cap").innerHTML = '<img src="'+img+'" style="max-width:100%; width: 100%;" />';

            txt_2 += y[i].getAttribute('titulo');
            if(txt_id != 1){
                document.getElementById("titulo_barra").innerHTML = 'Capítulo '+(txt_id - 1)+' - '+txt_2;
                document.getElementById("presentacion_cap").innerHTML = txt_2+'<br><br><i class="fa fa-arrow-right boton_principio" id="boton_inicio_curso" style="font-size: 1em;" onclick="inicia_subcapitulo('+txt_id+'); return false;"></i>';
            }
            else{
                document.getElementById("titulo_barra").innerHTML = txt_2;
                document.getElementById("presentacion_cap").innerHTML = txt_2+'<br><br><i class="fa fa-arrow-right boton_principio" id="boton_inicio_curso" style="font-size: 1em;" onclick="inicia_subcapitulo('+txt_id+'); return false;"></i>';
            }
        }
      }
    }
</script>

謝謝大家的問候。

Answer 1

朋友，我找到了解決我問題的方法。

我只是將此JS代碼添加到我的原始JavaScript中，並且如果章節具有確定的ID，則可以檢索子章節屬性數據。

        titulo_sub="";
        z = xmlDoc.getElementsByTagName('chapter')[id_capitulo - 1].childNodes;
        cont = 1;
        for (j = 0; j < z.length; j++) {
            impar = j % 2;
            if(impar == 1){
                a = z[j].attributes;
                titulo_sub += cont +'.  '+ a.getNamedItem("title").nodeValue.toString() + '<br>';
                cont = cont + 1;
            }
        }
        document.getElementById("menu_cap").innerHTML = titulo_sub;

親切的問候，並度過愉快的一天。