点击事件获取前一张图片的ID

Question

我有这个 HTML 代码

<div> <img src="download1.jpeg" image-id="9a8ae555af5f"></div>
<div><h1><a href ="#">test</a></h1></div>

当用户点击“测试”链接时，我想浏览树并获取链接前图像的“image-id”属性

我试过了，但是 imageID 返回 undefined

function trackClick(event)
{
  let imageId = this.$('a').prev('img').attr('image-id');

console.log("imageId", imageId);
}

document.addEventListener('click', trackClick, true);

关于如何使用 js 或 css 选择器完成这项工作的任何想法？

谢谢

Answer 1

这是带有 prev() 和 parent() 函数的 jquery 解决方案：

$('#test').on('click', function() {
    alert($(this).parent().parent().prev('div').find('img').attr('image-id'))
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> 
  <img src="download1.jpeg" image-id="9a8ae555af5f">
</div>
<div>
  <h1>
    <a href ="#" id = 'test'>test</a>
  </h1>
</div>

Answer 2

使用 Vanilla JS，一步一步：

function trackClick(event)
{
  let targetElement = event.target || event.srcElement;
     
  let closestDiv = targetElement.closest('div');

  let previousDiv = closestDiv.previousElementSibling;
  
  let insideImage = previousDiv.getElementsByTagName('img');
  // or
  // let insideImage = previousDiv.children;

  console.log(insideImage[0].getAttribute('src'));           
}

document.addEventListener('click', trackClick, true);