如何从两个单独的XML文件加载数据？

Question

我正在尝试从两个单独的文件中加载XML数据。在页面加载时，我想默认显示一个文件的数据。页面上会有一个按钮，用于显示下一个文件中的数据。

加载XML文件后，我需要将所有弹出框与循环结合起来。但是我的代码不支持循环弹出窗口。如何实现以下代码？请帮忙。

这是我的代码。

  $(document).ready(function(){
    $.ajax({
        type:"GET",
        url:"contact.xml",
        dataType:"xml",
        success:xmlParser2
    });
});

function xmlParser2(xml){
    var items = $(xml).children().children();
    items.sort(function() { return 0.5 - Math.random() });
    
    xml = $(xml).children();
    let i = 0;
    let total = $(xml).children().length;
    items.each(function (idx,index,item) {

        let expireArray = $(this).attr('expires').split('/');
        const expireDate = `${expireArray[2]}${expireArray[1]}${expireArray[0]}`;
        const now = new Date(),
            nowDate = `${now.getFullYear()}${(now.getMonth()+1) <10 ? '0'+(now.getMonth()+1): (now.getMonth()+1)}${now.getDate()}`;

        if (nowDate > expireDate) {
            return;
        }      
        
        let tag = $(this).prop("tagName")+index;
        let nextIdx = idx + 1;
        let prevIdx = idx - 1;
        //to make cyclic
        nextIdx = nextIdx == total ? 0 : nextIdx;
        prevIdx = prevIdx == -1 ? (total -1) : prevIdx;

        let image = '<img style="background-image:url(' + $(this).find("image").text() + ')"' + '" />';
        let image2 = '<div><img src="' + $(this).find("image").text() + '" width="100%" alt="' + '" />' + '</div>';
        let head = '<div>' + $(this).find("head").text() + '</div>';
        
        
        let html = `<div class="col-sm-4 random" id="random">
                    <div class="thumbnail randomdiv3" id="border" >
                    <a href="#${tag + idx}" id="openModalBtn">
                            <div>${image}</div>
                            <h5>${head}</h5>
                        </a>
                    </div>
                 </div>`;

       

        let popup = `<div id="${tag + idx}" class="overlay">
                <div class="popup">
                
                <a href="#${tag + prevIdx}" class="previous round">&#8249;</a>
                <a href="#${tag + nextIdx}" class="next round">&#8250;</a>
                    <h6>${head}</h6>
                    <a class="close" href="#">&times;</a>
                    <div>${image2}</div>
                </div>
            </div>`;

i++;


        if(i <= 3)    {
            $("#xmldata").append(html);
            $("#image_boxes").append(html);
        }
        else{            
            $("#rest_image_boxes").append(html);
        }
        
        $("#popup").append(popup);
    });
 
       var hash = window.location.hash;
    if(hash != ""){
        $("a[href='"+hash+"']").find("h5").click();
    }
    $("a[id='openModalBtn']").click(function(){
        window.location.hash = $(this).attr("href");
        
    
    });
}


function xmlParser3(xml){
    var items = $(xml).children().children();
    items.sort(function() { return 0.5 - Math.random() });
    
    xml = $(xml).children();
    let i = 0;
    let total = $(xml).children().length;
    items.each(function (idx,index,item) {

        let expireArray = $(this).attr('expires').split('/');
        const expireDate = `${expireArray[2]}${expireArray[1]}${expireArray[0]}`;
        const now = new Date(),
            nowDate = `${now.getFullYear()}${(now.getMonth()+1) <10 ? '0'+(now.getMonth()+1): (now.getMonth()+1)}${now.getDate()}`;

        if (nowDate > expireDate) {
            return;
        }      
        
        let tag = $(this).prop("tagName")+index;
        let nextIdx = idx + 1;
        let prevIdx = idx - 1;
        //to make cyclic
        nextIdx = nextIdx == total ? 0 : nextIdx;
        prevIdx = prevIdx == -1 ? (total -1) : prevIdx;

        let image = '<img style="background-image:url(' + $(this).find("image").text() + ')"' + '" />';
        let image2 = '<div><img src="' + $(this).find("image").text() + '" width="100%" alt="' + '" />' + '</div>';
        let head = '<div>' + $(this).find("head").text() + '</div>';
        
        
        let html = `<div class="col-sm-4 random" id="random">
                    <div class="thumbnail randomdiv3" id="border" >
                    <a href="#${tag + idx}" id="openModalBtn">
                            <div>${image}</div>
                            <h5>${head}</h5>
                        </a>
                    </div>
                 </div>`;

       

        let popup = `<div id="${tag + idx}" class="overlay">
                <div class="popup">
                
                <a href="#${tag + prevIdx}" class="previous round">&#8249;</a>
                <a href="#${tag + nextIdx}" class="next round">&#8250;</a>
                    <h6>${head}</h6>
                    <a class="close" href="#">&times;</a>
                    <div>${image2}</div>
                </div>
            </div>`;
            
            $("#rest_image_boxes").append(html);
  
        
        $("#popup").append(popup);
    });
 
       var hash = window.location.hash;
    if(hash != ""){
        $("a[href='"+hash+"']").find("h5").click();
    }
    $("a[id='openModalBtn']").click(function(){
        window.location.hash = $(this).attr("href");
        
    
  });
}


 $('#myButton1').click(function(e){
 e.preventDefault();
 $.ajax({
 type:"GET",
 url:"data.xml",
 dataType:"xml",
 success:xmlParser3
 });
 });

<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="rest_image_boxes"></div>
                        </div>
                </div>
             </div>
            </section>

        <section id="popup"></section>

Plunker