javascript - 图片映射和 jQuery .show() + .hide()

Question

我有点不确定这里发生了什么。我已经仔细检查了所有内容，但脚本仍然存在一个严重问题。

核心问题是一切正常，但是当我单击图片的 hideLabels 部分时，该 id 的 jquery 不会执行。其他一切都可以!所有其他区域 map 都适用于这两张图片。但由于某种原因 hideLabels 没有。但 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>

然后我就有了 jQuery 脚本。

  $('.content').hide();
$('#labels').hide();

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

编辑脚本应该做什么

基本上有两张 map 图片。一张没有标签 (#pic) 一张有 (#labels)。该网站显示#picture 而不是#labels。如果您单击图片 map #showLabels。该脚本隐藏#picture并显示#labels。 (这有效)然后当你展示#labels图片时。当您单击图片 map #hideLabels 时，图片会切换回来，因此隐藏(#labels)并显示(#picture)。

问题问题出在标签图片上。当我单击 id (#hideLabels) 时，没有任何反应。

我尝试过的。

当我将 id="1"替换为 map 元素 #hideLabels 和 jquery.仍然不起作用。但是，当在 jquery 中执行此操作时，它确实有效。

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

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

但这不是我需要的功能。我确实需要单击才能处理特定的矩形 map 。所以看来点击功能不适用于概念图#hideLabels，但为什么，以及如何解决这个问题？

Answer 1

你的 map 实际上并没有改变(你使用的是相同的 map 名称)，而且我看到同样的事情两次(忽略标签)，所以我要做的只是有一个切换而不是两个单独的 map

示例:

http://jsfiddle.net/dwkgsu79/

  $('.content').hide();
  $('#labels').hide();

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

你必须猜测按钮在哪里