抓取href并将其放在src上

Question

我有一个 div，它带来了一堆带有 href 链接到完整图像的缩略图。因此，我需要将这张图片动态地放入第二个 div 中，而不是从网站上打开这张图片。

这是我目前所拥有的：

• HTML

  <article id="thumbnails">
  
      <a href="large-image-1.jpg">
      <img class="image-99" alt="97" src="thumbnail-1.jpg">
      </a>
  
      <a href="large-image-2.jpg">
      <img class="image-98" alt="96" src="thumbnail-2.jpg">
      </a>
  
      <a href="large-image-3.jpg">
      <img class="image-97" alt="95" src="thumbnail-3.jpg">
      </a>
  
  </article>
  

  <div id="large-image">
      <img id="xxl" src="" title="">
  </div>
  

• jQuery

  $(document).ready(function() {
  
    $('#thumbnails').on('click','a', function(event) {
  
      var toLoad = $(event.target).append('<img src="' + 'attr('src').jpg />"');
      $('#large-image').fadeOut('fast',loadContent);
  
      function loadContent () {
          $('#large-image').load(toLoad,'',showNewContent);
      }
  
      function showNewContent () {
          $('#large-image').fadeIn('normal');
      }
  
      return false;
    });
  

我还做了一个codepen of it 来更好地说明它。

我正在考虑作为替代方案的一件事是记录单击的图像 href 并将另一个 div 的 src 替换为 attr() 事物。但我迷失了如何做到这一点。

Answer 1

您也可以尝试获取链接的href 并更改目标图像的src。

var largeImage = $('#large-image img');

$('#thumbnails a').click(function(e){
  e.preventDefault();

  var imageUrl = $(this).attr('href'); 

  largeImage.attr('src', imageUrl);
});

Example on JS Bin

Answer 2

$('#thumbnails').on('click','a', function(event) {
    var toLoad = $(this).append('<img src="' + this.href + '.jpg" />');

    //Rest of code
});

编辑：以上代码将获取点击链接的href属性，并将其添加到图片的src中。