Question

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

中心问题是一切正常，但当我点击图片的hideLabels部分时，该id的jquery不会执行。其他一切都有！所有其他区域地图适用于两张图片。但由于某些原因，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();
});

修改 脚本应该做什么

基本上有2张地图照片。一个没有标签（#picture）一个（#labels）。该网站显示#picture而不是#labels。如果你点击图片地图#showLabels。该脚本隐藏#picture并显示#labels。（这个工作）然后当你有#labels图片呈现。当您点击图片地图#hideLabels时，图片会切换回来隐藏（#labels）并显示（#picture）。

问题问题是在标签图片上。当我点击id（#hideLabels）时没有任何反应。

我尝试了什么。

当我更换id =＆＃34; 1＆＃34;到地图元素#hideLabels和jquery。仍然无法正常工作。但是，当在jquery中执行此操作时，它确实有效。

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

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

但这不是我需要的功能。我真的需要点击才能在特定的矩形图上工作。所以似乎点击功能不适用于概念图#hideLabels，但是为什么，以及如何解决这个问题呢？

Answer 1

您对两个映射器使用相同的ID。

更改第二个映射器的ID。

Answer 2

你的地图实际上并没有改变（你使用相同的地图名称），我发现它是同样的事情两次（忽略标签）所以我要做的就是切换不是两个单独的地图

实施例

http://jsfiddle.net/dwkgsu79/

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

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

您必须猜测按钮的位置

图片映射＆amp; jQuery .show（）+ .hide（）

2 个答案: