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

时间:2018-08-07 20:54:27

标签: jquery ajax url var

下面的脚本显示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 个答案:

答案 0 :(得分:2)

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

编辑:忘了提及,您也许可以将拇指保存在某个地方,并且如果您可以记住所有更好的资源,那么您只需要前两次拨打电话即可。祝你好运!