Javascript 图片测绘及；jQuery.show（）+。隐藏（）

我有点不确定这是怎么回事。我已经检查了所有内容，但脚本仍然存在严重问题

中心问题是一切正常，但当我单击图片的hideLabels部分时，该id的jquery不会执行。其他一切都可以！所有其他区域地图都适用于这两张图片。但出于某种原因，希德拉贝尔斯没有。但showLabels确实如此

 <section id="picture">
        <img src="alberta.jpg" usemap="#mapper"></img>
        <map name="mapper">
            <area id="pcalgary" shape="circle" coords="103, 266, 6" href="#" alt="Calgary">
            <area id="pedmonton" shape="circle" coords="113, 187, 6" href="#" alt="Edmonton">
            <area id="plethbridge" shape="circle" coords="133, 303, 5" href="#" alt="Lethbridge">
              <area id="pmedicinehat" shape="circle" coords="164, 290, 4" href="#" alt="medicine_hat">
              <area id="ppeacerivercity" shape="circle" coords="50, 114, 5" href="#" alt="peace_river_city">
              <area id="preddeer" shape="circle" coords="106, 231, 4" href="#" alt="red_deer">
              <area id="pbowriver" shape="circle" coords="127, 272, 11" href="#" alt="bow_river">
              <area id="pathabascariver" shape="circle" coords="133, 103, 15" href="#" alt="athabasca_river">
              <area id="psaskatchewanriver" shape="circle" coords="149, 181, 13" href="#" alt="saskatchewan_river">
              <area id="ppeace_river_river" shape="circle" coords="70, 52, 14" href="#" alt="peace_river_river">
              <area id="pathabasca_lake" shape="circle" coords="164, 36, 13" href="#" alt="lake_athabasca">
              <area id="pslave_lake" shape="circle" coords="82, 128, 14" href="#" alt="slave_lake">
              <area id="showLabels" shape="rect" coords="2, 286, 58, 320" href="#" alt="labelpicture">
        </map>
    </section>

    <section id="labels">
        <img src="albertab.jpg" usemap="#mapper"></img>
        <map name="mapper">
            <area id="pcalgary" shape="circle" coords="103, 266, 6" href="#" alt="Calgary">
            <area id="pedmonton" shape="circle" coords="113, 187, 6" href="#" alt="Edmonton">
            <area id="plethbridge" shape="circle" coords="133, 303, 5" href="#" alt="Lethbridge">
              <area id="pmedicinehat" shape="circle" coords="164, 290, 4" href="#" alt="medicine_hat">
              <area id="ppeacerivercity" shape="circle" coords="50, 114, 5" href="#" alt="peace_river_city">
              <area id="preddeer" shape="circle" coords="106, 231, 4" href="#" alt="red_deer">
              <area id="pbowriver" shape="circle" coords="127, 272, 11" href="#" alt="bow_river">
              <area id="pathabascariver" shape="circle" coords="133, 103, 15" href="#" alt="athabasca_river">
              <area id="psaskatchewanriver" shape="circle" coords="149, 181, 13" href="#" alt="saskatchewan_river">
              <area id="ppeace_river_river" shape="circle" coords="70, 52, 14" href="#" alt="peace_river_river">
              <area id="pathabasca_lake" shape="circle" coords="164, 36, 13" href="#" alt="lake_athabasca">
              <area id="pslave_lake" shape="circle" coords="82, 128, 14" href="#" alt="slave_lake">
              <area id="hideLabels" shape="rect" coords="2, 286, 58, 320" href="#" alt="nolabels">
        </map>
    </section>

编辑 脚本应该做什么

基本上一张地图有两张图片。一个没有标签（#图片），一个有（#标签）。该网站显示“图片”而不是“标签”。如果单击图片地图#showLabels。脚本将隐藏#图片并显示#标签。（这是有效的）然后当你展示#标签图片时。当你点击图片地图上的隐藏标签时，图片会切换回原来的位置，因此隐藏（#标签）并显示（#图片）

问题 问题是当标签在图片上时。当我点击id（#hideLabels）时，什么都没有发生

我尝试过的。

当我将id=“1”替换为map元素#hideLabels和jquery时。还是不行。但是，当在jquery中执行此操作时，它确实起作用

      $("#labels").click(function(){
         $('#labels').hide();
         $('#picture').show();
});

#标签指的是涉及图片的整个部分。所以点击图片确实有效

      $("#labels").click(function(){
         $('#labels').hide();
         $('#picture').show();
});

---

但这不是我需要的功能。我真的需要点击来处理特定的rect映射。因此，单击功能似乎不适用于概念图hideLabels，但为什么，以及如何解决此问题？

您对两个地图绘制者使用相同的id

---

更改第二个贴图器的id。

您的贴图实际上没有更改（您使用的是相同的贴图名称），并且我发现这是相同的事情两次（忽略标签），所以我要做的只是切换，而不是两个单独的贴图

例如：

---

您必须猜测按钮的位置

尝试将所有脚本放入

$（document）.ready（function（）{}）您能告诉我们应该发生什么吗？document ready不起作用。（即使拼写正确）。我编辑这篇文章是为了说明应该发生什么。请参阅新编辑。似乎是单击功能不起作用。请注意。非常感谢！事实上你是对的。这样效果更好。谢谢你。
  $('.content').hide();
  $('#labels').hide();

     $("#toggleLabels").click(function(){
     $('#picture').toggle();
     $('#labels').toggle();
 });