我正在尝试制作一张从 json(不是真正的 json,更像是 javascript 数组)加载的图像表,每次 json 更改时(当我使用一些脚本将新图像附加到 json 文件时,我希望我的图片表格也能上传。
这是json格式:
[{
"image": "images/set_1_UTC+03.jpg",
"weight": 101
}, {
"image": "images/set_1_UTC+03.jpg",
"weight": 102
}, {
"image": "images/set_1_UTC+03.jpg",
"weight": 103
}, {
"image": "images/set_1_UTC+03.jpg",
"weight": 104
}]
为此,我使用同位素。我设法实现了我上面提到的一切,唯一的问题是我想让图像可点击,每当我点击其中一个图像时,它的尺寸会更大,当我再次点击它时又会变回小尺寸.这是代码:
<script>
var previous = 0;
var current = 0;
loadJSON(function(response) {
// Parse JSON string into object
current = JSON.parse(response);
});
function loadJSON(callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', 'data.json', true); // Replace 'my_data' with the path to your file
xobj.onreadystatechange = function() {
if (xobj.readyState == 4 && xobj.status == "200") {
// Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
callback(xobj.responseText);
}
};
xobj.send(null);
}
let lengthOfprevious = previous.length;
setInterval(function() {
loadJSON(function(response) {
// Parse JSON string into object
current = JSON.parse(response);
});
previous = current;
if (lengthOfprevious != current.length) {
UpdateBody(lengthOfprevious);
}
lengthOfprevious = previous.length;
}, 5000);
function UpdateBody(startIndex) {
var newElements = "";
for (let i = startIndex; i < previous.length; i++) {
$(document).ready(function() {
newElements = "";
newElements +=
'<div class="photo element-item">' +
'<a href="' + previous[i].image + '"><img class="small-image" src="' + previous[i].image + '"/></a>' +
'<a class="weight">' + previous[i].weight + '</a></div>';
var $newElems = $(newElements);
$('#container').append($newElems).imagesLoaded(function() {
$('#container').isotope('insert', $newElems);
});
});
}
// ============//
$(function() {
var $container = $('#container'),
$photos = $container.find('.photo'),
$loadingIndicator = $('<div class="loading"><span><img src="http://i.imgur.com/IE7iw.gif" /></span></div>');
// trigger Isotope after images have loaded
$container.imagesLoaded(function() {
$container.isotope({
itemSelector: '.photo',
masonry: {
columnWidth: 200
}
});
});
// shows the large version of the image
// shows small version of previously large image
function enlargeImage($photo) {
$photos.filter('.large').removeClass('large');
$photo.addClass('large');
$container.isotope('reLayout');
}
$photos.find('a').click(function() {
var $this = $(this),
$photo = $this.parents('.photo');
if ($photo.hasClass('large')) {
// already large, just remove
$photo.removeClass('large');
$container.isotope('reLayout');
} else {
if ($photo.hasClass('has-big-image')) {
enlargeImage($photo);
} else {
// add a loading indicator
$this.append($loadingIndicator);
// create big image
var $bigImage = $('<img>', {
src: this.href
});
// give it a wrapper and appended it to element
$('<div>', {
'class': 'big-image'
})
.append($bigImage)
.appendTo($this)
.imagesLoaded(function() {
$loadingIndicator.remove()
enlargeImage($photo);
});
// add a class, so we'll know not to do this next time
$photo.addClass('has-big-image');
}
}
return false;
});
});
}
</script>
问题是在 setInterval 运行一次后,一切都按预期工作,当它再次运行时,图像不再可点击。如果我在 for 中将//============//标记之后的部分移动,则只有最后一张图片是可点击的。
我想不出解决方案(我是 javascript 的初学者)。有人可以指出我正确的方向吗?
更新:Here您可以获得该项目的存档,以便可以在本地运行它。
您需要手动复制和粘贴数据文件中的某些行才能使演示正常运行,因为它会搜索数据文件先前状态和当前状态的差异。问题是一开始是可以点击的,后来就不行了。
最佳答案
我发现您的代码中有几处需要修改:
- 为什么
$(document).ready
使用了超过 1 次? - 无需使用
$(function()
因为我看到照片类是在运行时动态生成的,容器类已经在 DOM 中,所以我修改了点击事件
$container.on('click', '.photo a', function() {
编辑 请注意代码未经测试;我刚刚用代码更正了它。
最终更新代码如下:
var previous = 0;
var current = 0;
loadJSON(function(response) {
// Parse JSON string into object
current = JSON.parse(response);
});
function loadJSON(callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', 'data.json', true); // Replace 'my_data' with the path to your file
xobj.onreadystatechange = function() {
if (xobj.readyState == 4 && xobj.status == "200") {
// Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
callback(xobj.responseText);
}
};
xobj.send(null);
}
let lengthOfprevious = previous.length;
setInterval(function() {
loadJSON(function(response) {
// Parse JSON string into object
current = JSON.parse(response);
});
previous = current;
if (lengthOfprevious != current.length) {
UpdateBody(lengthOfprevious);
}
lengthOfprevious = previous.length;
}, 5000);
function UpdateBody(startIndex) {
var newElements = "",
$container = $('#container'),
$photos = $container.find('.photo'),
$loadingIndicator = $('<div class="loading"><span><img src="http://i.imgur.com/IE7iw.gif" /></span></div>');
$(document).ready(function() {
for (let i = startIndex; i < previous.length; i++) {
newElements = "";
newElements +=
'<div class="photo element-item">' +
'<a href="' + previous[i].image + '"><img class="small-image" src="' + previous[i].image + '"/></a>' +
'<a class="weight">' + previous[i].weight + '</a></div>';
var $newElems = $(newElements);
$container.append($newElems).imagesLoaded(function() {
$container.isotope('insert', $newElems);
});
}
$container.imagesLoaded(function() {
$container.isotope({
itemSelector: '.photo',
masonry: {
columnWidth: 200
}
});
});
// shows the large version of the image
// shows small version of previously large image
function enlargeImage($photo) {
$photos.filter('.large').removeClass('large');
$photo.addClass('large');
$container.isotope('reLayout');
}
$container.on('click', '.photo a', function() {
var $this = $(this),
$photo = $this.parents('.photo');
if ($photo.hasClass('large')) {
// already large, just remove
$photo.removeClass('large');
$container.isotope('reLayout');
} else {
if ($photo.hasClass('has-big-image')) {
enlargeImage($photo);
} else {
// add a loading indicator
$this.append($loadingIndicator);
// create big image
var $bigImage = $('<img>', {
src: this.href
});
// give it a wrapper and appended it to element
$('<div>', {
'class': 'big-image'
})
.append($bigImage)
.appendTo($this)
.imagesLoaded(function() {
$loadingIndicator.remove()
enlargeImage($photo);
});
// add a class, so we'll know not to do this next time
$photo.addClass('has-big-image');
}
}
return false;
});
});
}
关于javascript - 同位素和 javascript - 添加新元素后元素不再可点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50439049/