Question

这里我有一个可点击的图像，有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>

请帮忙。

谢谢。

Answer 1

使用event target：

$("#Map").on("click", function(e){
    alert(e.target.id);
})

＆＃13;

<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>

＆＃13;

Answer 2

您可以将此作为您的javascript使用。

$(document).ready(function () {
    var idArray = [];
    $('#Map>area').on('click',function () {
        idArray.push(this.id);
        console.log(this.id)
    });
});

Answer 3

要获取所有id个<area>元素，您可以使用$.map()返回当前迭代元素的id。使用.on() click事件获取所点击的id元素的<area>

＆＃13;

let ids = $.map($("#Map area"), function(el) { return el.id });

console.log("all `id`s:", ids);

setTimeout(function() {
  console.clear();
}, 2000);

$("#Map area").on("click", function() {
  console.log(this.id)
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="663" border="0" align="center">
  <tr>
    <td><img src="http://lorempixel.com/663/473/cats" 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>

＆＃13;

如何获取所有唯一ID并在jquery中找到单击的id值？

3 个答案: