Question

我创建了一个代码来显示XML中的数据。我需要从XML过滤一些数据并显示在页面中。实际上，我只需要在页面中显示三个节点。单击查看全部按钮时，需要显示其他节点。请帮助我实现代码。

这是代码。

function showCD(xml){
    xml = $(xml).children();
    $(xml).children().each(function () {                    
        let TITLE = $(this).find("TITLE").text();
        let ARTIST =$(this).find("ARTIST").text();
        let COUNTRY = $(this).find("COUNTRY").text();
        let COMPANY =$(this).find("COMPANY").text();

        let html = `<div class="col-md-4">
                      <p>${TITLE}</p>
                      <p>${ARTIST}</p>
                      <p>${COUNTRY}</p>
                      <p>${COMPANY}</p>
                    </div>`;

        $("#xmldata").append(html);
    });
}



<div class="row" id="xmldata"></div>

   <section>
                <div class="container">
                    <input type="button" value="View All" id="myButton" class="reveal" onclick="toggler('toggle_container');">

                        <div id="toggle_container" class='hidden'>
                        <div class="block">
                           <div class="row" id="xmldata"></div>
                        </div>
                </div>
             </div>
    </section>

test.xml

<?xml version="1.0" encoding="UTF-8"?>
<CATALOG>
  <CD category="new">
    <TITLE>Empire Burlesque</TITLE>
    <ARTIST>Bob Dylan</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Columbia</COMPANY>
    <PRICE>10.90</PRICE>
    <YEAR>1985</YEAR>
  </CD>
  <CD category="hide">
    <TITLE>Hide your heart</TITLE>
    <ARTIST>Bonnie Tyler</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>CBS Records</COMPANY>
    <PRICE>9.90</PRICE>
    <YEAR>1988</YEAR>
  </CD>
<CATALOG>

就像下面的图片一样。

http://next.plnkr.co/edit/KgmzSWEaIOBRf54M?open=lib%2Fscript.js&preview

Answer 1

我已根据您的要求Demo

更新了您的代码

代替2个单独的xmldata和xmldataall div，您只能使用一个div并隐藏所有大于2的子级索引。

$(document).ready(function(){
    $.ajax({
        type:"GET",
        url:"test.xml",
        dataType:"xml",
        success:showCD
    });
});

function showCD(xml){
    xml = $(xml).children();
    let i = 0;

    $(xml).children().each(function () {                    
        let TITLE = $(this).find("TITLE").text();
        let ARTIST =$(this).find("ARTIST").text();
        let COUNTRY = $(this).find("COUNTRY").text();
        let COMPANY =$(this).find("COMPANY").text();
        
        let html = `<div class="col-md-4">
                      <p>${TITLE}</p>
                      <p>${ARTIST}</p>
                      <p>${COUNTRY}</p>
                      <p>${COMPANY}</p>
                    </div>`;

        i++;

        if(i <= 3)    {
            $("#xmldata").append(html);
            $("#xmldataall").append(html);
        }
        else{            
            $("#xmldataall").append(html);
        }
        
    });
}

$('#myButton1').click(function () {
                                var self = this;
                                change(self);
                            });

                            function change(el) {
                                if (el.value === "View All")
                                    el.value = "Hide All";
                                else
                                    el.value = "View All";
                            }

                            function toggler(divId) {
                                $("#" + divId).toggleClass("hide");
                                $("#xmldata").toggle();
                            }


                            function directLinkModal(hash) {
                                $(hash).modal('show');
                            }

<!DOCTYPE html>
<html lang="en">
<head>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    

</head>
<body>

      <div class="row" id="xmldata"></div>

   <section>
                <div class="container">
                    <input type="button" value="View All" id="myButton1" class="reveal" style="float: right;"  onclick="toggler('toggle_container');">

                        <div id="toggle_container" class='hide'>
                        <div class="block">
                           <div class="row" id="xmldataall"></div>
                        </div>
                </div>
             </div>
            </section>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> 
    

</body>
</html>

如何显示xml中的特定节点？

1 个答案: