圖片映射＆jQuery .show（）+ .hide（）

我有點不確定這裏發生了什麼。我檢查了一切，但腳本仍然存在嚴重問題。圖片映射＆jQuery .show（）+ .hide（）

中心問題是一切正常，但是當我單擊圖片的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），一個沒有（＃標籤）。該網站顯示#picture而不顯示＃標籤。如果你點擊圖片地圖#showLabels。該腳本隱藏#picture並顯示＃標籤。（這工作），然後當你有＃標籤圖片介紹。當你點擊圖片地圖#hideLabels時，圖片切換回隱藏（＃標籤）並顯示（＃圖片）。

問題問題是當標籤圖片上。當我點擊id（#hideLabels）時，什麼也沒有發生。

我試過了。

當我將id =「1」替換爲地圖元素#hideLabels和jquery時。仍然不起作用。但是，當在jQuery中執行此操作時，它確實有效。

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

#labels指涉及圖片的整個部分。所以點擊圖片確實有效。

但這不是我需要的功能。我真的需要點擊才能在特定的矩形圖上工作。因此，似乎點擊功能不適用於概念圖#hideLabels，但爲什麼，我該如何解決這個問題？

來源

2015-11-19 JP Foster

儘量把所有的腳本中 '$（document）.ready（functiion（）{ }）;' –

您能告訴我們應該發生什麼嗎？ –

文件準備就緒不起作用。（即使更正了拼寫）。我編輯帖子說明應該發生什麼。 –

你的地圖實際上並沒有改變（你使用相同的地圖名稱），我發現它是同一個東西兩次（忽略標籤），所以我會做的只是切換而不是兩個單獨的地圖

例：

http://jsfiddle.net/dwkgsu79/

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

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

你必須猜出這些按鈕是

來源

2015-11-19 16:19:31

其實你是對的。這效果更好。謝謝你。 –

您對兩個映射器都使用相同的ID。

更改第二個映射器的ID。

來源

2015-11-19 16:15:37

現貨。非常感謝！ –

圖片映射＆jQuery .show（）+ .hide（）

回答

相關問題