10

我正在为一个客户端编写一个模型（使用 HTML、JS/jQuery）和 CSS，其中涉及一个应用了 Map 的单个图像（界面的）。由于某些原因，我不会解释单击某个区域时执行的包含动画的动作，然后更改图像src（因此它看起来像是在界面之间移动），然后我将不同的图像映射应用于图像（也许我应该说<img>标签）

客户要求这个，我知道这看起来很疯狂，但我没有任何模型工具来执行动画等...

我注意到了一种模式，我可以重构我的代码，以便更容易扩展和维护。但是我想知道，假设我有以下 HTML：

<img src="claas_ipad3.jpg" USEMAP="#claas_ipad3" width="1130" height="871" alt="" border="0" id="mainPage">
    <map name="claas_ipad3">
      <area shape="rect" coords="181,249,255,341" href=""  alt="" id="Contacts">
      <area shape="rect" coords="345,251,454,341" href=""  alt="" id="Appointments">
      <area shape="rect" coords="533,256,576,311" href=""  alt="" id="Maps">
      <area shape="rect" coords="686,255,785,344" href=""  alt="" id="Tasks">
      <area shape="rect" coords="835,246,973,348" href=""  alt="" id="Products">
      <area shape="rect" coords="176,412,278,513" href=""  alt="" id="Reports">
      <area shape="rect" coords="330,411,457,513" href=""  alt="" id="PriceTable">
      <area shape="rect" coords="502,399,637,518" href=""  alt="" id="SalesCycle">
      <area shape="rect" coords="677,398,808,519" href=""  alt="" id="MetaData">
      <area shape="rect" coords="844,408,970,510" href=""  alt="" id="Settings">
      <area shape="rect" coords="173,545,283,662" href=""  alt="" id="Vids">
      <area shape="rect" coords="328,558,461,652" href=""  alt="" id="Web">
      <area shape="rect" coords="491,559,626,666" href=""  alt="" id="Files">
    </map>

如果单击了某个区域，我是否可以确定使用 JavaScript 或 jQuery？然后我可以识别 ID 并执行正确的操作。我目前拥有的是很多不同的条件，比如......

 $("#Contacts").click(function(event){
            event.preventDefault();

            // okay lets show the contacts interface
            $("#mainPage").fadeOut(300, function(){
                $(this).attr('src','claas_ipad3_1.jpg').bind('onreadystatechange load', function(){
                    if (this.complete){
                        $(this).fadeIn(300);
                        $(this).attr('USEMAP','#claas_ipad_1');
                    }
                    });
                });
            });

但是，如果我知道单击了哪个区域（通过确定 id），我可以将数组值应用到通用函数中，而不是专门绑定到地图区域。

我在想我可以确定被点击的 id 是这样的：

$(this).live('click', function () {
    alert($(this).attr('id')); 
});

但是这会影响我的整个页面，这不是问题，但我知道它不会起作用。

对不起，如果我没有很好地解释自己或者我的措辞很差。如果需要，我可以扩展或改写。

谢谢

更新

我已经解决了这个问题，如果我将 ID 应用到 Map 使用以下将返回 ID

 $("#Map1 area").click( function () {
        alert($(this).attr('id')); // this
    });
4

1 回答 1

9

有不同的方法。我想最简单的是这个：

$("map[name=claas_ipad3] area").live('click', function () {
    alert($(this).attr('id')); 
});

请注意，从 jQuery 1.7 开始，不推荐使用 .live() 方法，您应该使用 .on() 附加事件处理程序：

$("map[name=claas_ipad3] area").on('click', function () {
    alert($(this).attr('id')); 
});
于 2012-06-11T10:16:03.567 回答