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

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

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

我的HTML解决方案：

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

$('.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=“”

---

我尝试使用前面的选择器，但没有成功。

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

选择

元素的父节点，即

。这可以使用

$（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);
});

---

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

选择

元素的父节点，即

。这可以使用

$（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);
});

---

只需向图像中添加一个类，如下所示：

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

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

---

只需向图像中添加一个类，如下所示：

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

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

---

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

var getData=$（'#imgID'）。数据（“高分辨率”）；
console.log（getData）
您可以使用下面的代码，根据您的要求进行修改


var getData=$（'#imgID'）。数据（“高分辨率”）；
console.log（getData）
通过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（）中指定元素类型。i、 e

通过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（）中指定元素类型。i、 e




$（'.show modal'）。在（'click'，function（）上{
var$this=$（this）.parent（'map'）.prev（'img'）.attr（'data-highres'）；
警报（本美元）；
});

下面是简单的代码。我总是得到相同的属性。->
data highres=“pages/dn/high/dn-02.jpg”



$（'.show modal'）。在（'click'，function（）上{
var$this=$（this）.parent（'map'）.prev（'img'）.attr（'data-highres'）；
警报（本美元）；
});

下面是简单的代码。我总是得到相同的属性。->
data highres=“pages/dn/high/dn-02.jpg”
您可以通过
$（“[data highress]”）选择元素
我认为这个stackoverflow问题可以帮助您：
$（'img[data highres]”）或
$（this）。最近（'map[name=“img]”）。prev（'img'）
您可以通过
$（'data highress]”选择元素
我认为这个stackoverflow问题可以帮助您：
$（'img[data highres]'）
或
$（this）.nestest（'map[name=“img”]'））.prev（'img'）
使用此解决方案，我得到了第一张图像。但是如果我点击第二个图像，我会得到一个带有第一个图像的模式窗口，您的DOM是如何构造的？请更新您的问题，如果可能，请包括MCVE。如果您的问题中提到的标记被连续重复，即img map img map img map img map。。。好的，我有一个解决这个问题的办法。我添加了一个连续的数字符号->#image1、#image2等等。通过这个解决方案，我得到了第一个图像。但是如果我点击第二个图像，我会得到一个带有第一个图像的模式窗口，您的DOM是如何构造的？请更新您的问题，如果可能，请包括MCVE。如果您的问题中提到的标记被连续重复，即img map img map img map img map。。。好的，我有一个解决这个问题的办法。我添加了一个连续的数字符号->#image1、#image2等等