Question

有一个最近查看的列表，当我单击一张图像时，该图像将出现在列表中。
但是现在我无法获得想要的图像，并且单击图像时仅使用第一幅图像显示在列表中，如代码${photos[0].file}中所示。
那么，如何获得我单击的图像到最近查看的列表？

function display(photos) {

  let htmlStr = "";
  for (let i = 0; i < photos.length; i++) {
    htmlStr += `<figure data-full="${photos[i].full}" title="${photos[i].title}" file="${photos[i].file}"><img src = "${photos[i].file}"  alt="City view" height="200" width="200"><figcaption>${photos[i].title}</figcaption></figure>`;

  }
  $("#container").html(htmlStr);

  let htStr = "";
  $('figure').each(function(index) {

    $(this).click(function() {
      htStr += `<figure id='recentphoto' data-full="${photos.full}" title="${photos.title}"><img src = "${photos[0].file}" alt="City view" height="140" width="140"><figcaption >${photos[0].title}</figcaption></figure>`;
      $("#recent").html(htStr);

    });

  });

Answer 1

$(document).ready(function() {
  var photos = [
    {
      full: 'full1',
      title: 'title1',
      file: 'file1'
    },
    {
      full: 'full2',
      title: 'title2',
      file: 'file2'
    },
  ];
  
  let htmlStr = "";
  for (let i = 0; i<photos.length; i++) {
      htmlStr += `<figure data-full="${photos[i].full}"
      data-title="${photos[i].title}" data-file="${photos[i].file}" title="${photos[i].title}" file="${photos[i].file}"><img src = "${photos[i].file}"  alt="City view" height="200" width="200"><figcaption>${photos[i].title}</figcaption></figure>`; 
  }

  $("#container").html(htmlStr);
  
  let htStr = "";

   $('figure').click(function(e) {
     var el = $(this).data();
       htStr += `<figure id='recentphoto' data-full="${el['full']}" title="${el['title']}"><img src = "${el['file']}" alt="City view" height="140" width="140"><figcaption >${el['title']}</figcaption></figure>`; 
       $("#recent").html(htStr);
   });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container"></div>
<div id="recent"></div>

您可以获得jQuery数据属性的帮助。

如何获得在此javascript函数中单击的图像的索引？

1 个答案: