如何在单击按钮时更改 $.ajax url 源变量？

Question

下面的脚本显示 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>

Answer 1

一种简单的方法是将 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]);
});

edit: 忘了说了，大拇指可以直接保存在某个地方，如果能把所有的资源都记住就更好了，那你只需要前两次调用就可以了。祝你好运！

如何在单击按钮时更改 $.ajax url 源变量？

How to change $.ajax url source variables on button click?

ajax

url

jquery

var