jquery - Ajax 显示来自 var 定义的源的图像。如何编码按钮以替换新源的变量?
问题描述
我使用 ajax 从目录中获取所有图像 url,并将它们呈现为屏幕上的实际图像。此外,我还抓取了全尺寸版本的网址(它们具有相同的文件名,只是不同的文件夹),因此当您单击缩略图时,会显示大图像。这一切都很好。
文件夹路径由 2 个变量定义。
我将如何编写一个 onclick 链接,将更改 URL 并显示一组全新的图像。
这些是我的 2 个变量:
var folder = "gallery1/thumbs/";
var folder2 = "gallery1/fullsize/";
这是我的ajax的其余部分:
$.ajax({
url : folder,
success: function (data) {
$(data).find("a").attr("href", function (i, val) {
if( val.match(/\.(jpe?g|png|gif)$/) ) {
$("#grid").append( "<a class='item' href='"+ folder2 + val +"'><img class='squares' src='"+ folder + val +"'></a>" );
}
});
}
});
});
目标是单击链接以更改一组新图像的这些 url,而无需重新加载页面。
关于这段代码的外观有什么想法吗?
解决方案
我认为主要思想是关于如何检索呈现画廊,启动新的 ajax 以获取新的图像 url(完整图像和缩略图)并将它们更新回<a>
and<img>
属性。下面进行演示。因为我不知道“呈现”画廊的定义是什么,所以我只是替换了最后一个画廊。
请忽略 ajax 详细信息,因为有额外的代码来处理 picsum api 并且与您的问题无关。只关注成功回调。
$(document).ready(function() {
$('#add-image').on('click', function() {
newImage();
})
$('#replace-image').on('click', function() {
replaceLast();
})
});
function newImage() {
var xhr;
var _orgAjax = $.ajaxSettings.xhr;
$.ajaxSettings.xhr = function() {
xhr = _orgAjax();
return xhr;
};
$.ajax({
url: 'https://picsum.photos/100/100/?random',
success: function(data, status, hxr) {
var thumbUrl = xhr.responseURL;
var fullUrl = thumbUrl.replace('/100/100', '/480/320')
// create <img> and wrap it with <a> and put it under grid
$('<img>', {
class: 'squares',
src: thumbUrl
}).wrap($('<a>', {
class: 'item',
href: fullUrl
})).parent().appendTo('#grid');
}
})
}
function replaceLast() {
var xhr;
var _orgAjax = $.ajaxSettings.xhr;
$.ajaxSettings.xhr = function() {
xhr = _orgAjax();
return xhr;
};
$.ajax({
url: 'https://picsum.photos/100/100/?random',
success: function(data, status, hxr) {
var thumbUrl = xhr.responseURL;
var fullUrl = thumbUrl.replace('/100/100', '/480/320')
// find the last gallery
var lastImg = $('#grid a.item:last-child');
// change its href url
lastImg.attr('href', fullUrl);
// change thumbnail src url
lastImg.children('img.squares').attr('src', thumbUrl);
}
})
}
#grid {
margin: 8px;
}
a.item {
padding: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add-image">
add image
</button>
<button id="replace-image">
replace last image
</button>
<div id="grid">
</div>
推荐阅读
- vb.net - 使用 Linq 返回不同的对象
- angular - 如何使用“d3.js”库在折线图中放置圆(点)?
- spring - 检测到慢速操作:com.hazelcast.map.impl.operation.DeleteOperation 同时调用 ITopic.publish()
- dax - DAX 中的列中仅不同值的总和
- c# - TaskCanceledException 性能低下
- grep - Grep 对 S3 文件夹中的文件进行排序
- python - 致命的 Python 错误:initfsencoding:无法获取语言环境编码文件“/cm/shared/apps/anaconda2/4.5.12/lib/python2.7/encodings/__init__.py”
- wpf - 如何创建一个继承自 Thumb 的自定义控件“MyThumb”,同时用户不能设置 MyThumb 的宽度和高度?
- java - Safepoint+stats 日志,输出 JDK12 中没有 vmop 操作
- csv - 如何在 Jasper 报告(CSV 导出与 HTML 布局)中省略分组功能(但将分组值作为列包含)?