我试图将 XML 数据显示到缩略图和弹出框。我使用了 JavaScript 和 HTML。现在它工作正常。我在 div 上一个一个地加载 XML 数据。所以我的代码太大了。我想最小化我的代码(JavaScript 和 HTML)。可以使用某种技术自动重复缩略图和灯箱吗？
这是我使用的代码。
数据.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
<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>
脚本.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>');
});
}
样式.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;
}
最佳答案
尝试使用这些代码。简单得多。
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>
脚本.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);
});
}
关于javascript - 如何显示来自 XML 的数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52292537/