javascript - 如何在jquery中选择上一个元素？

Question

我有一张图片，我想指定该区域的哪个元素是可点击的。

红色条纹不应该是可点击的。

我的 HTML 解决方案:

<img src="" data-highres="" usemap="#img"> 
<map name="img">
   <area class="show-modal" shape="rect" cords="" href="">
</map>

所以当我点击白色区域时，它应该会显示一个带有“这个”图像的模态窗口。

我的 jquery 解决方案:

$('.show-modal').on('click', function(e){
            e.preventDefault();
            var highres = $('').attr("data-highres");
            $('.modal').css('display', 'block');
            $('#modal-image').attr('src', highres);
        });

当我点击图像(白色区域)时，它会在模态窗口中显示高分辨率图像。

我将 $("") 选择器留空，因为我不知道如何选择 img 属性 -> data-highres=""

我尝试使用之前的选择器，但没有用。

Answer 1

实际上你需要做如下DOM遍历操作才能得到你需要的:

1. 选择<area>的父节点元素，即 <map> .这可以使用 $(this).closest('map') 来完成或 $(this).parent('map') .
2. 选择图像兄弟，这是通过链接 .prev('img')到上面的选择器

因此，这样的事情应该可行:

$('.show-modal').on('click', function(e){
    e.preventDefault();
    var highres = $(this).closest('map').prev('img').attr('data-highres');
    $('.modal').css('display', 'block');
    $('#modal-image').attr('src', highres);
});