如何在点击按钮时更改$.ajax url源变量？
如何在点击按钮时更改$.ajax url源变量？
提问于 2018-08-08 04:54:27
下面的脚本显示gallery1thumbs文件夹中的缩略图，单击时将打开gallery1full文件夹中的较大版本。
我想创建一个按钮，当单击时，将这些值更改为gallery2thumb gallery2full，以便显示新图像，替换旧图像。
我尝试了很多方法，但都失败了。我试图做到这一点尽可能简单，因为页面最终会有很多这样的按钮。我不希望页面重新加载，这就是我选择ajax的原因。
我只是不知道如何对按钮进行编码，使其更改这些值并显示新的内容。
<script>
$( document ).ready(function() {
ajaxFunction = function(gallery) {
$.ajax({
url : gallery.thumbs,
success: function (data) {
$(data).find("a").attr("href", function (i, val) {
if( val.match(/\.(jpe?g|png|gif)$/) ) {
$("#griddie").append( "<a class='item' href='"+ gallery.full + val +"'><img class='squares' src='"+ gallery.thumbs + val +"'></a>" );
}
});
}
});
};
gallery = [];
gallery[0] = {
thumbs: "/gallery1thumbs/",
full: "/gallery1full/"
}
gallery[1] = {
thumbs: "/gallery2thumbs/",
full: "/gallery2full/"
}
counter = 0;
$("#button").click( function() {
ajaxFunction([counter % 2]);
});
});
</script>
<button id="button">click here</button>
<div id="griddie"></div>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-08 05:45:57
一种简单的方法是将AJAX请求包装在如下所示的函数中
ajaxFunction = function(gallery) {
$.ajax({
url : gallery.full,
success: function (data) {
$(data).find("a").attr("href", function (i, val) {
if( val.match(/\.(jpe?g|png|gif)$/) ) {
$("#griddie").append( "<a class='item' href='"+ data + val +"'><img class='squares' src='"+ gallery.thumbs + val +"'></a>" );
}
});
}
});
};然后在单击按钮时调用该函数。然后你可以把路径变成对象(像这样的东西就行了)
gallery = [];
gallery[0] = {
thumbs: "/gallery1thumbs/",
full: "/gallery1full/"
}
gallery[1] = {
thumbs: "/gallery2thumbs/",
full: "/gallery2full/"
}然后，您可以切换正在使用的函数，并像这样调用新的ajax函数
counter = 0;
$("#button").click( function() {
ajaxFunction(gallery[counter % 2]);
});编辑:忘了提一下，你也许可以把拇指保存在某个地方，如果你能记住所有的资源，那就更好了，那么你只需要在前两次打电话。祝好运!
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51735279
复制相关文章
相似问题