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属性 - ＆gt;的数据HIGHRES = “”

我尝试使用上一个选择器，但它没有用。

Answer 1

实际上，您必须执行以下DOM遍历操作才能获得所需内容：

选择<area>元素的父节点，即<map>。这可以使用$(this).closest('map')或$(this).parent('map')。
选择图像同级，通过将.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);
});

Answer 2

您可以使用以下代码，根据您的要求进行修改。

var getData = $('#imgID').data("highres");
console.log(getData);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="url/to/your/image.jpg" id="imgID" data-highres="high" alt="image_name" usemap="#Map" />
<div name="Map" id="Map">
    
</div>

Answer 3

只需在图片中添加一个类：

<img src="" data-highres="Hello" class="imgCLASS" usemap="#img">

然后制作：

var highres = $('.imgCLASS').attr("data-highres");
alert(highres); // Hello

https://jsfiddle.net/myrma60b/1/

Answer 4

通过DOM遍历引用元素：

    $('.show-modal').on('click', function(e){//called when the element with show.modal class is clicked
    alert("map area clicked");
    });

    $('.show-modal').parent().prev().on('click', function (e) {//called when the element before the map area element is clicked
    alert("previous element of map area is clicked");
    });

后者适用于所有类型的元素标签。如果您希望它特定于图像类型，请在prev（）中指定元素类型。即，

    $('.show-modal').parent().prev('img').on('click', function (e) {//called when the element before the map area element is clicked
    alert("Image is clicked");
    });

Answer 5

<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<img  src="pages/dn/low/dn-02.jpg" data-highres="pages/dn/high/dn-02.jpg" usemap="#image">
<map name="image">
    <area class="show-modal" shape="rect" coords="1,1,725,1094" alt="clickable">
</map>
<br>
<img  src="pages/dn/low/dn-03.jpg" data-highres="pages/dn/high/dn-03.jpg" usemap="#image">
<map name="image">
    <area class="show-modal" shape="rect" coords="1,1,725,1094" alt="clickable">
</map>
<script>
    $('.show-modal').on('click', function(){
        var $this = $(this).parent('map').prev('img').attr('data-highres');
        alert($this);
    });
</script>
</body>
</html>

这里是简单的代码。我总是得到相同的attr。 - ＆GT; data-highres="pages/dn/high/dn-02.jpg"

如何在jquery中选择前一个元素？

5 个答案: