这里我有一张可点击的图片,它有 32 个唯一 ID。
我必须找到所有这些 ID,并且必须获取点击了哪个 ID,以及我正在尝试的那个值不起作用,我们将不胜感激。
这是我的 html :
<table width="663" border="0" align="center">
<tr>
<td><img src="~/Images/Dental.jpg" width="663" height="474" border="0" usemap="#Map" /></td>
</tr>
</table>
<map name="Map" id="Map">
<area shape="rect" id="UR8" coords="9,75,45,158" href="#" />
<area shape="rect" id="UR7" coords="49,77,85,157" href="#" />
<area shape="rect" id="UR6" coords="89,75,126,159" href="#" />
<area shape="rect" id="UR5" coords="130,71,161,160" href="#" />
<area shape="rect" id="UR4" coords="173,73,201,158" href="#" />
<area shape="rect" id="UR3" coords="208,71,243,156" href="#" />
<area shape="rect" id="UR2" coords="250,71,281,154" href="#" />
<area shape="rect" id="UR1" coords="289,70,323,154" href="#" />
<area shape="rect" id="UL1" coords="331,71,369,154" href="#" />
<area shape="rect" id="UL2" coords="373,71,405,154" href="#" />
<area shape="rect" id="UL3" coords="410,71,449,158" href="#" />
<area shape="rect" id="UL4" coords="453,71,486,157" href="#" />
<area shape="rect" id="UL5" coords="494,71,528,158" href="#" />
<area shape="rect" id="UL6" coords="532,72,571,157" href="#" />
<area shape="rect" id="UL7" coords="576,73,607,158" href="#" />
<area shape="rect" id="UL8" coords="613,74,647,157" href="#" />
<area shape="rect" id="LR8" coords="6,317,40,383" href="#" />
<area shape="rect" id="LR7" coords="49,316,77,393" href="#" />
<area shape="rect" id="LR6" coords="86,318,123,394" href="#" />
<area shape="rect" id="LR5" coords="128,315,161,391" href="#" />
<area shape="rect" id="LR4" coords="168,316,202,391" href="#" />
<area shape="rect" id="LR3" coords="209,316,241,396" href="#" />
<area shape="rect" id="LR2" coords="247,316,280,392" href="#" />
<area shape="rect" id="LR1" coords="288,318,320,393" href="#" />
<area shape="rect" id="LL1" coords="333,317,362,393" href="#" />
<area shape="rect" id="LL2" coords="371,318,405,388" href="#" />
<area shape="rect" id="LL3" coords="413,316,443,394" href="#" />
<area shape="rect" id="LL4" coords="452,316,483,390" href="#" />
<area shape="rect" id="LL5" coords="493,318,526,389" href="#" />
<area shape="rect" id="LL6" coords="530,316,570,391" href="#" />
<area shape="rect" id="LL7" coords="573,314,606,393" href="#" />
<area shape="rect" id="LL8" coords="611,312,647,388" href="#" />
</map>
这是我正在尝试的代码:
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function () {
var idArray = [];
$('#Map').each(function () {
idArray.push(this.id);
console.log(this.id)
});
});
</script>
请帮忙。
谢谢。
最佳答案
使用event target为此:
$("#Map").on("click", function(e){
alert(e.target.id);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="663" border="0" align="center">
<tr>
<td><img src="~/Images/Dental.jpg" width="663" height="474" border="0" usemap="#Map" /></td>
</tr>
</table>
<map name="Map" id="Map">
<area shape="rect" id="UR8" coords="9,75,45,158" href="#" />
<area shape="rect" id="UR7" coords="49,77,85,157" href="#" />
<area shape="rect" id="UR6" coords="89,75,126,159" href="#" />
<area shape="rect" id="UR5" coords="130,71,161,160" href="#" />
<area shape="rect" id="UR4" coords="173,73,201,158" href="#" />
<area shape="rect" id="UR3" coords="208,71,243,156" href="#" />
<area shape="rect" id="UR2" coords="250,71,281,154" href="#" />
<area shape="rect" id="UR1" coords="289,70,323,154" href="#" />
<area shape="rect" id="UL1" coords="331,71,369,154" href="#" />
<area shape="rect" id="UL2" coords="373,71,405,154" href="#" />
<area shape="rect" id="UL3" coords="410,71,449,158" href="#" />
<area shape="rect" id="UL4" coords="453,71,486,157" href="#" />
<area shape="rect" id="UL5" coords="494,71,528,158" href="#" />
<area shape="rect" id="UL6" coords="532,72,571,157" href="#" />
<area shape="rect" id="UL7" coords="576,73,607,158" href="#" />
<area shape="rect" id="UL8" coords="613,74,647,157" href="#" />
<area shape="rect" id="LR8" coords="6,317,40,383" href="#" />
<area shape="rect" id="LR7" coords="49,316,77,393" href="#" />
<area shape="rect" id="LR6" coords="86,318,123,394" href="#" />
<area shape="rect" id="LR5" coords="128,315,161,391" href="#" />
<area shape="rect" id="LR4" coords="168,316,202,391" href="#" />
<area shape="rect" id="LR3" coords="209,316,241,396" href="#" />
<area shape="rect" id="LR2" coords="247,316,280,392" href="#" />
<area shape="rect" id="LR1" coords="288,318,320,393" href="#" />
<area shape="rect" id="LL1" coords="333,317,362,393" href="#" />
<area shape="rect" id="LL2" coords="371,318,405,388" href="#" />
<area shape="rect" id="LL3" coords="413,316,443,394" href="#" />
<area shape="rect" id="LL4" coords="452,316,483,390" href="#" />
<area shape="rect" id="LL5" coords="493,318,526,389" href="#" />
<area shape="rect" id="LL6" coords="530,316,570,391" href="#" />
<area shape="rect" id="LL7" coords="573,314,606,393" href="#" />
<area shape="rect" id="LL8" coords="611,312,647,388" href="#" />
</map>
<script>
$(document).ready(function () {
var idArray = [];
$('#Map').each(function () {
idArray.push(this.id);
console.log(this.id)
});
$("#Map").on("click", function(e){
alert(e.target.id);
})
});
</script>
关于javascript - 如何获取所有唯一ID并在jquery中找到点击的ID值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46306949/