如何在jQuery中选择上一个元素？
[英]How to select previous element in jquery?
问题描述
我有一张图片，我想分配该区域的哪个元素是可单击的。
红色条纹不应单击。
我的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 =“”
我尝试使用以前的选择器，但没有用。
5 个解决方案
解决方案1
1 已采纳 2017-04-03 12:11:01
实际上，您必须执行以下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);
});
解决方案2
1 2017-04-03 12:26:37
您可以使用以下代码，根据需要进行修改。
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>
解决方案3
0 2017-04-03 12:12:36
只需向图像添加一个类，如下所示：
<img src="" data-highres="Hello" class="imgCLASS" usemap="#img">
然后做这个：
var highres = $('.imgCLASS').attr("data-highres");
alert(highres); // Hello
解决方案4
0 2017-04-03 12:45:34
通过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");
});
解决方案5
0 2017-04-03 14:02:14
<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>
这是简单的代码。 我所有的时间都一样。 -> data-highres="pages/dn/high/dn-02.jpg"
jQuery选择上一个元素
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.