在SVG中使用JS/JQuery顯示/隱藏<object>中的元素SVG

使用SVG時，如果您使用<object>將SVG代碼嵌入到HTML中，則必須創建一個偵聽器並使用處理程序編寫可影響SVG。在SVG中使用JS/JQuery顯示/隱藏<object>中的元素SVG

這項工作的目標有一些背景：根據用戶選擇的樓層級別來獲取SVG。文字（房間號碼）以及顏色會發生變化。我希望通過爲每個樓層添加元素並在開始時隱藏除一樓以外的所有元素來實現這一點。當選擇第二層時，所有與第二層不共享的第一層元素都被隱藏，並顯示所有第二層元素。

您可以查看這裏正在進行的工作：http://zadias.me/SVG/Monroe%20Jefferson/MonroeJeff.html

這裏是我的JavaScript（只是部分）;

var a = document.getElementById("theSVG"); 


    //it's important to add an load event listener to the object, as it will load the svg doc asynchronously 
    a.addEventListener("load",function(){ 
     var svgDoc = theSVG.contentDocument; //get the inner DOM of the SVG object 
     var Quads = svgDoc.getElementById("Quads"); //get the inner element by id 
     var Doubles = svgDoc.getElementById("Doubles"); 
     var Triples = svgDoc.getElementById("Triples"); 
     var Singles = svgDoc.getElementById("Singles"); 
     var Utility = svgDoc.getElementById("Utility"); 

     var floor1 = new Array(svgDoc.getElementsByClassName("floor1").length); 
     var floor2 = new Array(svgDoc.getElementsByClassName("floor2").length); 
     var floor3 = new Array(svgDoc.getElementsByClassName("floor3").length); 
     /* 
     for (i =0 ; i < svgDoc.getElementsByClassName("floor1").length ; i++) { 
      alert(svgDoc.getElementsByClassName("floor1")[i]); 
     } 
     */ 
     for (i = 0 ; i < svgDoc.getElementsByClassName("floor1").length ; i++) { 
      floor1[i] = svgDoc.getElementsByClassName("floor1")[i]; 
     } 

     for (i = 0 ; i < svgDoc.getElementsByClassName("floor2").length ; i++) { 
      floor2[i] = svgDoc.getElementsByClassName("floor2")[i]; 
     } 

     for (i = 0 ; i < svgDoc.getElementsByClassName("floor3").length ; i++) { 
      floor3[i] = svgDoc.getElementsByClassName("floor3")[i]; 
     } 

     var floor1toggle = svgDoc.getElementById("f1"); 
     var floor2toggle = svgDoc.getElementById("f2"); 
     var floor3toggle = svgDoc.getElementById("f3"); 
     /* 
     for (i =0 ; i < floor1.length ; i++) { 
      alert(floor1[i]); 
     } 
     */ 
     Quads.addEventListener("click",QuadsClick,false); //add behaviour 
     Quads.addEventListener("mouseover",QuadsHover,false); 
     Quads.addEventListener("mouseout",QuadsOut,false); 

     Doubles.addEventListener("click",DoublesClick,false); 
     Doubles.addEventListener("mouseover",DoublesHover,false) 
     Doubles.addEventListener("mouseout",DoublesOut,false); 

     Triples.addEventListener("click",TriplesClick,false); 
     Triples.addEventListener("mouseover",TriplesHover,false); 
     Triples.addEventListener("mouseout",TriplesOut,false); 

     Singles.addEventListener("click",SinglesClick,false); 
     Singles.addEventListener("mouseover",SinglesHover,false); 
     Singles.addEventListener("mouseout",SinglesOut,false); 

     Utility.addEventListener("click",UtilityClick,false); 
     Utility.addEventListener("mouseover",UtilityHover,false); 
     Utility.addEventListener("mouseout",UtilityOut,false); 

     floor1toggle.addEventListener("click",showFloor1,false); 
     floor2toggle.addEventListener("click",showFloor2,false); 
     floor3toggle.addEventListener("click",showFloor3,false); 


    },false); 

    ///////////////// Floor Selection/////////////////////////// 

    function showFloor1() { 
      for (i = 0 ; i < floor1.length ; i++) { 
       floor1[i].style.display='inline'; 
      } 
      for (i = 0 ; i < floor2.length ; i++) { 
       floor2[i].style.display='none'; 
      } 
      for (i = 0 ; i < floor3.length ; i++) { 
       floor3[i].style.display='none'; 
      } 

      alert("floor2 should show"); 
     } 

    function showFloor2() { 
      for (i = 0 ; i < floor1.length ; i++) { 
       floor1[i].style.display='none'; 
      } 
      for (i = 0 ; i < floor2.length ; i++) { 
       floor2[i].style.display='inline'; 
      } 
      for (i = 0 ; i < floor3.length ; i++) { 
       floor3[i].style.display='none'; 
      } 

      alert("floor2 should show"); 
     } 

    function showFloor3() { 
      for (i = 0 ; i < floor1.length ; i++) { 
       floor1[i].style.display='none'; 
      } 
      for (i = 0 ; i < floor2.length ; i++) { 
       floor2[i].style.display='none'; 
      } 
      for (i = 0 ; i < floor3.length ; i++) { 
       floor3[i].style.display='inline'; 
      } 

      alert("floor3 should show");  
     }

而在我的SVG文件，我有幾個對象類（可以是一個路徑，矩形，文本）標記爲「floorX」（X爲1,2，或3）。

我似乎無法得到這個工作，我已經做了一些調試，如果你注意到註釋掉的for循環，並且警告消息會給出所有歸類爲「floor1」的東西，所以我確信NodeList擁有我需要的一切。

showFloorX（）函數中的警報函數調用沒有被調用..可能是我的迭代是壞的？我嘗試了沒有迭代，就這樣：

function showFloor1() { 
       floor1[i].style.display='inline'; 
       floor2[i].style.display='none'; 
       floor3[i].style.display='none';     
      alert("floor2 should show"); 
     }

但仍然沒有雪茄。

有沒有其他途徑可以做到這一點？也許.style.display不是我需要的嗎？

謝謝！

編輯：我想我的問題是在這裏：

var floor1toggle = svgDoc.getElementById("f1"); 
    var floor2toggle = svgDoc.getElementById("f2"); 
    var floor3toggle = svgDoc.getElementById("f3");

在SVG文件，該ID在地圖上的按鈕1 2和3分別是F1 F2和F3。只有之所以沒有發生什麼，當點擊1 2和3時，我認爲是floorXtoggle沒有正確連接到ID，因爲它在SVG中是外部的。再次

選擇雙打三同單打等等。這是什麼扔我送行時，它的工作原理..

感謝。

編輯：在chrome中查看JS調試器時，我注意到我收到一個Uncaught Reference Error：「未捕獲的ReferenceError：floor1未定義」。

但floor1明顯存在，當我運行：

  for (i =0 ; i < svgDoc.getElementsByClassName("floor1").length ; i++) { 
       alert(svgDoc.getElementsByClassName("floor1")[i]); 
     }

所以，我可以從這個扣除的是，「floor1」的陣列/節點列表超出範圍的功能在被調用時？

編輯：

的問題似乎是爲@Shvetusya指出，該陣列是不是在相同的範圍內我的函數調用上點擊。我注意到，添加空陣列var floor1, floor2, floor3 = new Array()會導致floor1保持不確定狀態。大多數故障很可能在我的回調函數，我不知道我做了正確的灌輸..

var a = document.getElementById("theSVG"); 
    var floor1, floor2, floor3 = new Array(); //define arrays 
    alert(floor1); //debug, tells me that floor1 is "undefined".. 

    //it's important to add an load event listener to the object, as it will load the svg doc asynchronously 
    a.addEventListener("load",function(){ 
     var svgDoc = theSVG.contentDocument; //get the inner DOM of the SVG object 
     var Quads = svgDoc.getElementById("Quads"); //get the inner element by id 
     var Doubles = svgDoc.getElementById("Doubles"); 
     var Triples = svgDoc.getElementById("Triples"); 
     var Singles = svgDoc.getElementById("Singles"); 
     var Utility = svgDoc.getElementById("Utility"); 

     var floor1toggle = svgDoc.getElementById("f1"); 
     var floor2toggle = svgDoc.getElementById("f2"); 
     var floor3toggle = svgDoc.getElementById("f3"); 


     Quads.addEventListener("click",QuadsClick,false); //add behaviour 
     Quads.addEventListener("mouseover",QuadsHover,false); 
     Quads.addEventListener("mouseout",QuadsOut,false); 

     Doubles.addEventListener("click",DoublesClick,false); 
     Doubles.addEventListener("mouseover",DoublesHover,false); 
     Doubles.addEventListener("mouseout",DoublesOut,false); 

     Triples.addEventListener("click",TriplesClick,false); 
     Triples.addEventListener("mouseover",TriplesHover,false); 
     Triples.addEventListener("mouseout",TriplesOut,false); 

     Singles.addEventListener("click",SinglesClick,false); 
     Singles.addEventListener("mouseover",SinglesHover,false); 
     Singles.addEventListener("mouseout",SinglesOut,false); 

     Utility.addEventListener("click",UtilityClick,false); 
     Utility.addEventListener("mouseover",UtilityHover,false); 
     Utility.addEventListener("mouseout",UtilityOut,false); 

     floor1toggle.addEventListener("click",showFloor1,false); 
     floor2toggle.addEventListener("click",showFloor2,false); 
     floor3toggle.addEventListener("click",showFloor3,false); 

/////////callback functions, go back and change the array, NOT WORKING?? 

     var arraySet1 = function() { 
      floor1.concat(svgDoc.getElementsByClassName("floor1").length); 
      for (i = 0 ; i < svgDoc.getElementsByClassName("floor1").length ; i++) { 
       floor1[i] = svgDoc.getElementsByClassName("floor1")[i]; 
      } 

     } 

     var arraySet2 = function() { 
      floor2.concat(svgDoc.getElementsByClassName("floor2").length); 
      for (i = 0 ; i < svgDoc.getElementsByClassName("floor2").length ; i++) { 
       floor2[i] = svgDoc.getElementsByClassName("floor2")[i]; 
      } 

     } 

     var arraySet3 = function() { 
      floor3.concat(svgDoc.getElementsByClassName("floor3").length); 
      for (i = 0 ; i < svgDoc.getElementsByClassName("floor3").length ; i++) { 
       floor3[i] = svgDoc.getElementsByClassName("floor3")[i]; 
      } 

     } 
     floor1toggle.addEventListener("DOMContentLoaded",arraySet1,false); 
     floor2toggle.addEventListener("DOMContentLoaded",arraySet2,false); 
     floor3toggle.addEventListener("DOMContentLoaded",arraySet3,false); 
     alert(floor1); //still undefined 
     alert(floor2); //still undefined 
     alert(floor3); //still undefined 

    },false); 

    ///////////////// Floor Selection/////////////////////////// 

    function showFloor1() { 
      for (i = 0 ; i < floor1.length ; i++) { 
       floor1[i].show; 
      } 
      for (i = 0 ; i < floor2.length ; i++) { 
       floor2[i].hide; 
      } 
      for (i = 0 ; i < floor3.length ; i++) { 
       floor3[i].hide; 
      } 

      alert("floor2 should show"); 
     } 

    function showFloor2() { 
      for (i = 0 ; i < floor1.length ; i++) { 
       floor1[i].hide; 
      } 
      for (i = 0 ; i < floor2.length ; i++) { 
       floor2[i].show; 
      } 
      for (i = 0 ; i < floor3.length ; i++) { 
       floor3[i].hide; 
      } 

      alert("floor2 should show"); 
     } 

    function showFloor3() { 
      for (i = 0 ; i < floor1.length ; i++) { 
       floor1[i].hide; 
      } 
      for (i = 0 ; i < floor2.length ; i++) { 
       floor2[i].hide; 
      } 
      for (i = 0 ; i < floor3.length ; i++) { 
       floor3[i].show; 
      } 

      alert("floor3 should show");  
     }

來源

2013-07-16 user2533212

我認爲這個問題是floor1，floor2，和floor3您的匿名回調函數內部定義因此它們不在showFloor1()的範圍內。

在您將var a =定義爲空數組後，嘗試定義它們，然後將addEventListener添加到回調中的數組中。

來源

2013-07-17 18:59:04 lanan

謝謝！就將數組放入範圍而言，這非常有意義。我來自Java背景，並且我對真正的回調函數並不熟悉，那麼使用'addEventListener'實現的最佳方法是什麼？我是否將它作爲第二個參數傳入，如此？ 'ObjectName.addEventListener（「click」，callBackFuncHere（），false）;' – user2533212

嘿，我在回調函數中拍了一下，仍然沒有雪茄，現在數組都是undefined .. – user2533212

試試'var floor1 = []， floor2 = []，floor3 = [];' – lanan

在SVG中使用JS/JQuery顯示/隱藏<object>中的元素SVG

回答

相關問題