Question

我试图将XML数据显示到缩略图和弹出框。我使用JavaScript和HTML。现在它可以正常工作了。我在div上一一加载XML数据。因此我的代码太大。我想最小化我的代码（JavaScript和HTML）。可以使用某些技术自动重复缩略图和灯箱吗？

这是我使用的代码。

data.xml

Observable

index.html

<?xml version="1.0"?>
<paintings>
<offers>
  <sub>Morbi volutpat dapibus rhoncus.</sub>
  <head>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</head>
  <image>https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Liliumbulbiferumflowertop.jpg/220px-Liliumbulbiferumflowertop.jpg</image>
  <para>Terms and conditions</para>
  <list>Cras dolor dui, hendrerit eget eleifend eu</list>
  <vdate>Vestibulum ante ipsum primis in faucibus</vdate>
</offers>

<offers2>
  <sub>In eget mauris sodales</sub>
  <head>posuere lacus in, accumsan nulla.</head>
  <image>https://i.ebayimg.com/images/g/SpMAAOSwceNZXpSZ/s-l300.jpg</image>
  <para>Terms and conditions</para>
  <list>Integer ullamcorper magna eu tempus pharetra.</list>
  <vdate>Vivamus a lobortis tortor. </vdate>
</offers2>

<offers3>
  <sub>Class aptent taciti sociosqu ad litora torquent</sub>
  <head>per conubia nostra, per inceptos himenaeos.</head>
  <image>https://pbs.twimg.com/profile_images/883859744498176000/pjEHfbdn_400x400.jpg</image>
  <para>Terms and conditions</para>
  <list>Proin facilisis, elit sed pretium pharetra</list>
  <vdate>eget convallis dui turpis eu augue</vdate>
</offers3>
</paintings>

script.js

 <section>
            <div class="container">
                <div class="head-topic">

                </div><br>
                <div class="row">
                    <div></div>

                    <div class="col-sm-4">
                        <div class="thumbnail">
                            <a href="#popup1">
                                <div id="img_container2"> </div>
                            </a>
                            <div class="caption offers">
                                <a href="#popup1">
                                    <div class="offer-wrap">
                                        <div class="img-wrap" data-backimg="offers-shopping"></div>
                                        <div class="title2">
                                            <h5 id="head2">
                                            </h5>
                                        </div>
                                    </div></a>
                                    <div class="txt">
                                    <a href="#popup1"><h4 id="sub_head2"></h4></a>
                                <a href="#popup1"><p id="vdate2"></p></a></div>
                            </div>
                        </div>
                     </div>

                      <div class="col-sm-4">
                        <div class="thumbnail">
                            <a href="#popup2">
                                <div id="img_container4"> </div>

                            <div class="caption offers">
                                <a href="#popup2">
                                    <div class="offer-wrap">
                                        <div class="img-wrap" data-backimg="offers-shopping"></div>
                                        <div class="title2">
                                            <h5 id="head4">
                                            </h5>
                                        </div>
                                    </div></a>
                                    <div class="txt">
                                    <a href="#popup2"><h4 id="sub_head4"></h4></a>
                                <a href="#popup2"><p id="vdate4"></p></a></div>
                            </div>
                        </div>
                     </div>

                      <div class="col-sm-4">
                        <div class="thumbnail" >
                            <a href="#popup3">
                                <div id="img_container6"> </div>

                            <div class="caption offers">
                                <a href="#popup3">
                                    <div class="offer-wrap">
                                        <div class="img-wrap" data-backimg="offers-shopping"></div>
                                        <div class="title2">
                                            <h5 id="head6">
                                            </h5>
                                        </div>
                                    </div></a>
                                    <div class="txt">
                                    <a href="#popup3"><h4 id="sub_head6"></h4></a>
                                <a href="#popup3"><p id="vdate6"></p></a></div>
                            </div>
                        </div>
                     </div>


                </div>
            </div>
            </section>


         <section>
    <!-- Modal -->
            <div id="popup1" class="overlay">
                <div class="popup">
                    <h6 id="sub_head"></h6>
                    <h6 id="head"></h6>
                    <a class="close" href="#">&times;</a>
                    <div class="row">
                        <div class="col-sm-3">
                            <div id="img_container"></div>
                        </div>
                        <div class="col-sm-9">
                            <div id="list"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="popup2" class="overlay">
                <div class="popup">
                    <h6 id="sub_head3"></h6>
                    <h6 id="head3"></h6>
                    <a class="close" href="#">&times;</a>
                    <div class="row">
                        <div class="col-sm-3">
                            <div id="img_container3"></div>
                        </div>
                        <div class="col-sm-9">
                            <div id="list3"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="popup3" class="overlay">
                <div class="popup">
                    <h6 id="sub_head5"></h6>
                    <h6 id="head5"></h6>
                    <a class="close" href="#">&times;</a>
                    <div class="row">
                        <div class="col-sm-3">
                            <div id="img_container5"></div>
                        </div>
                        <div class="col-sm-9">
                            <div id="list5"></div>
                        </div>
                    </div>
                </div>
            </div>
         </section>

style.css

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

function xmlParser(xml){
        $(xml).find("offers").each(function(){
            $("#img_container").append(
                '<div><img src="' + $(this).find("image").text() + '" width="100%" alt="' + '" />' + '</div>');

/*light-box*/

        $("#sub_head").append(
                '<div>' + $(this).find("sub").text() + '</div>');

        $("#head").append(
                '<div>' + $(this).find("head").text() + '</div>');

        $("#list").append(
                '<ul><li>' + $(this).find("list").text() + '</li></ul>');

        $("#vdate").append(
                '<div>' + $(this).find("vdate").text() + '</div>');

        $("#telephone").append(
                '<div>' + $(this).find("telephone").text() + '</div>');



/*thumbnail*/

     $("#img_container2").append(
                '<img style="background-image:url(' + $(this).find("image").text() + ')"' + '" />');

        $("#head2").append(
                '<div>' + $(this).find("head").text() + '</div>');

        $("#sub_head2").append(
                '<div>' + $(this).find("sub").text() + '</div>');

        $("#vdate2").append(
                '<div>' + $(this).find("vdate").text() + '</div>');
        });



      $(xml).find("offers2").each(function(){
            $("#img_container3").append(
                '<div><img src="' + $(this).find("image").text() + '" width="100%" alt="' + '" />' + '</div>');

/*light-box*/

        $("#sub_head3").append(
                '<div>' + $(this).find("sub").text() + '</div>');

        $("#head3").append(
                '<div>' + $(this).find("head").text() + '</div>');

        $("#list3").append(
                '<ul><li>' + $(this).find("list").text() + '</li></ul>');

        $("#vdate3").append(
                '<div>' + $(this).find("vdate").text() + '</div>');

        $("#telephone3").append(
                '<div>' + $(this).find("telephone").text() + '</div>');



/*thumbnail*/

     $("#img_container4").append(
                '<img style="background-image:url(' + $(this).find("image").text() + ')"' + '" />');

        $("#head4").append(
                '<div>' + $(this).find("head").text() + '</div>');

        $("#sub_head4").append(
                '<div>' + $(this).find("sub").text() + '</div>');

        $("#vdate4").append(
                '<div>' + $(this).find("vdate").text() + '</div>');
        });


   $(xml).find("offers3").each(function(){
            $("#img_container5").append(
                '<div><img src="' + $(this).find("image").text() + '" width="100%" alt="' + '" />' + '</div>');

/*light-box*/

        $("#sub_head5").append(
                '<div>' + $(this).find("sub").text() + '</div>');

        $("#head5").append(
                '<div>' + $(this).find("head").text() + '</div>');

        $("#list5").append(
                '<ul><li>' + $(this).find("list").text() + '</li></ul>');

        $("#vdate5").append(
                '<div>' + $(this).find("vdate").text() + '</div>');

        $("#telephone5").append(
                '<div>' + $(this).find("telephone").text() + '</div>');



/*thumbnail*/

     $("#img_container6").append(
                '<img style="background-image:url(' + $(this).find("image").text() + ')"' + '" />');

        $("#head6").append(
                '<div>' + $(this).find("head").text() + '</div>');

        $("#sub_head6").append(
                '<div>' + $(this).find("sub").text() + '</div>');

        $("#vdate6").append(
                '<div>' + $(this).find("vdate").text() + '</div>');
        });

    }

Answer 1

尝试使用这些代码。简单得多。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <title>XML Parse</title>
    <link rel="icon" type="image/x-icon" href="images/idss.ico" />  
    <!-- Site CSS -->
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <section>
            <div class="container">
                <div class="head-topic">
                </div><br>
                <div class="row" id="xmldata"></div>
            </div>
    </section>

<!-- Modal -->
         <section id="popup"></section>



    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

    <!-- custom JavaScript -->
    <script src="script.js"></script>   
</body>
</html>

script.js

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

function xmlParser(xml){
    xml = $(xml).children();
    $(xml).children().each(function () {                    
        let tag = $(this).prop("tagName");
        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 sub = '<div>' + $(this).find("sub").text() + '</div>';
        let vdate = '<div>' + $(this).find("vdate").text() + '</div>';
        let list = '<div>' + $(this).find("list").text() + '</div>';
        let html = `<div class="col-sm-4">
                    <div class="thumbnail">
                        <a href="#${tag}">
                            <div>${image}</div>
                        </a>
                        <div class="caption offers">
                            <a href="#${tag}">
                                <div class="offer-wrap">
                                    <div class="img-wrap" data-backimg="offers-shopping"></div>
                                    <div class="title2">
                                        <h5>${head}</h5>
                                    </div>
                                </div></a>
                                <div class="txt">
                                <a href="#${tag}"><h4>${sub}</h4></a>
                            <a href="#popup1"><p>${vdate}</p></a></div>
                        </div>
                    </div>
                 </div>`;
        let popup = `<div id="${tag}" class="overlay">
                <div class="popup">
                    <h6>${sub}</h6>
                    <h6>${head}</h6>
                    <a class="close" href="#">&times;</a>
                    <div class="row">
                        <div class="col-sm-3">
                            <div>${image2}</div>
                        </div>
                        <div class="col-sm-9">
                            <div>${list}</div>
                        </div>
                    </div>
                </div>
            </div>`;
        $("#xmldata").append(html);
        $("#popup").append(popup);
    });
}

如何显示XML中的数据？

1 个答案: