javascript - 如何从两个单独的 XML 文件加载数据?
问题描述
我正在尝试从两个单独的文件加载 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">‹</a>
<a href="#${tag + nextIdx}" class="next round">›</a>
<h6>${head}</h6>
<a class="close" href="#">×</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">‹</a>
<a href="#${tag + nextIdx}" class="next round">›</a>
<h6>${head}</h6>
<a class="close" href="#">×</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>
解决方案
推荐阅读
- mysql - mysqldump 和 load 如何影响 rails 架构和迁移?
- angular - 使用 Jasmine 组件和服务进行测试
- kubernetes - 防止在 OpenShift 中删除项目
- email - 使用 IMAPSync 从 GMail 导入
- php - sms api 在本地机器上不工作,但如果放在托管服务器上就可以工作
- swift - 可以/应该在没有持久性的情况下使用核心数据吗?
- javascript - 在 Three.js 中切换相机类型时未保留相机的方向
- ruby-on-rails-3 - Rails 应用程序 config.eager_load 设置为零?
- matlab - 从数据中查找给定月份的温度的函数
- java - 如何为自定义对象的地图或列表实现自定义可写的写入和读取字段?