How to select previous element in jquery?
Question
i have an image and i would like to assign which element of the area is clickable.
The red stripe shouldn't be clickable.
My HTML solution:
<img src="" data-highres="" usemap="#img">
<map name="img">
<area class="show-modal" shape="rect" cords="" href="">
</map>
So when i click on the white area it should show me a modal window with "this" image.
my jquery solution:
$('.show-modal').on('click', function(e){
e.preventDefault();
var highres = $('').attr("data-highres");
$('.modal').css('display', 'block');
$('#modal-image').attr('src', highres);
});
When i click on the image(white area) it sould show me a high resulation image in a modal window.
I left the $("") selector empty because i don't know how to select the img attribute -> data-highres=""
I tried with the previous selector but it didn't work.
5 answers
solution1
1 ACCPTED 2017-04-03 12:11:01
Actually you have to do the following operations of DOM traversal to get what you need:
- Select the parent node of the
<area>element, which is<map>. This can be done either using$(this).closest('map')or$(this).parent('map'). - Select the image sibling, which is by chaining
.prev('img')to the selector above
Therefore, something like this should work:
$('.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);
});
solution2
1 2017-04-03 12:26:37
You can use below code, modify as per your requirements.
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>
solution3
0 2017-04-03 12:12:36
Just add a class to your image like this:
<img src="" data-highres="Hello" class="imgCLASS" usemap="#img">
and then make this:
var highres = $('.imgCLASS').attr("data-highres");
alert(highres); // Hello
solution4
0 2017-04-03 12:45:34
Refer the element by DOM traversal:
$('.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");
});
The later one works for all types of element tags. If you want it to be specific to image types, specify the element type in prev(). ie,
$('.show-modal').parent().prev('img').on('click', function (e) {//called when the element before the map area element is clicked
alert("Image is clicked");
});
solution5
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>
here is simple code. i get all the time the same attr. -> data-highres="pages/dn/high/dn-02.jpg"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.