javascript - 获取 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 并用 attr() 内容替换另一个 div 的 src 。但我迷失了如何做到这一点。

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