Ajax 显示来自 var 定义的源的图像。如何编码按钮以替换新源的变量？

Question

我使用 ajax 从目录中获取所有图像 url 并将它们呈现为屏幕上的实际图像。此外，我还抓取了全尺寸版本的 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>" );
            } 
        });
    }
});
});

目标是单击链接以更改一组新图像的这些网址无需重新加载页面。

对这段代码的外观有什么想法吗？

Answer 1

我认为主要思想是关于如何检索展示库、触发新的 ajax 以获取新的图像 url（完整图像和缩略图）并将它们更新回 <a> 和 <img> 属性。下面进行演示。因为我不知道“Presenting”画廊的定义是什么，所以我只是替换了最后一个画廊。

请忽略 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>