如何获取我在此 javascript 函数中单击的 indexof 图像？答案

【问题标题】：How can I get the indexof image I clicked in this javascript function?如何获取我在此 javascript 函数中单击的 indexof 图像？
【发布时间】：2019-08-20 02:12:33
【问题描述】：

有一个最近查看的列表，当我单击一个图像时，该图像将出现在列表中。
但是现在我无法获得我想要的图像，我只是在单击图像时使用第一个图像出现在列表中，就像代码${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);

    });

  });

【问题讨论】：

#container 标签中的图片是我可以点击的，
能否请您添加您的 html 代码或创建小提琴？
为什么要复制身份证？ ID 应该是唯一的。

标签： javascript jquery indexing

【解决方案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的数据属性的帮助。

【讨论】：