[英]How to display data from XML?
I tried to display XML data to thumbnail and popup box. 我试图将XML数据显示到缩略图和弹出框。 I used JavaScript and HTML. 我使用JavaScript和HTML。 Now It is working properly.I load XML data one by one on the divs. 现在它可以正常工作了。我在div上一一加载XML数据。 So my code is too large. 因此我的代码太大。 I want to minimize my codes (both JavaScript and HTML). 我想最小化我的代码(JavaScript和HTML)。 Can automatically repeat thumbnails and lightboxs using some technique? 可以使用某些技术自动重复缩略图和灯箱吗?
This is the codes I used. 这是我使用的代码。
data.xml data.xml中
<?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>
index.html 的index.html
<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="#">×</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="#">×</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="#">×</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>
script.js 的script.js
$(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>');
});
}
style.css style.css文件
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 2s ease-in-out;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
.thumbnail img {
width: 100%;
height: 272px;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 20%;
vertical-align: middle;
position: inherit;
}
Try with these code. 尝试使用这些代码。 Much simpler. 简单得多。
index.html 的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 的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="#">×</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);
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.