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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (128)

下面的脚本显示来自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>
提问于
用户回答回答于

这样做的一个简单方法是将Ajax请求封装在如下函数中:

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/"
}

然后,你可以切换使用哪个Ajax函数,并按如下方式调用新的Ajax函数:

counter = 0;
$("#button").click( function() {
 ajaxFunction(gallery[counter % 2]);
});

扫码关注云+社区

领取腾讯云代金券