2013-12-17 4 views
0

Я пытаюсь реализовать функцию, которая скрывает некоторые слои SVG. Он работает несколько, но реакция на пользовательские клики непоследовательна. Несколько раз функции show-hide вызываются, а иногда ничего не происходит. Если я дважды щелкнул текст в выбранных svg ... Как реализовать лучший обработчик события click?JQuery click() на части объекта SVG несовместимо

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
      <title> Switch - demo</title> 

      <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script> 



       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"></script> 




       <script type='text/javascript' src="http://keith-wood.name/js/jquery.svg.js"></script> 
       <script type='text/javascript' src="http://keith-wood.name/js/jquery.svganim.js"></script> 

       <style type='text/css'> 
       #svgbasics { width: 600px; height: 500px; border: 1px solid #484; } 


       </style> 



       <script type='text/javascript'>//<![CDATA[ 


       function drawOpenSwitch(svg){ 

        //Boolean states for switches: 
        var f1closed = false; 
        var q1closed = false; 

        var changeSwitch = function(){ 
         $('#closed3Pswitch').hide(); 
         $('#closed3Prelay').hide(); 



         $('#f1Button').click(function() { 

          if(f1closed == false){ 
           $('#open3Pswitch').hide(); 
           $('#closed3Pswitch').show(); 
          }else{ 
           $('#closed3Pswitch').hide(); 
           $('#open3Pswitch').show(); 
          } 
          f1closed=!f1closed; 
         }); 


         $('#q1Button').click(function() { 
          if(q1closed == false){ 
           $('#open3Prelay').hide(); 
           $('#closed3Prelay').show(); 
           }else{ 
           $('#closed3Prelay').hide(); 
           $('#open3Prelay').show(); 
          } 
          q1closed=!q1closed; 
         }); 
       }; 



       svg.clear(); 
       var switchElement=svg.load('./fullschema_connected_combined.svg', {onLoad: changeSwitch, addTo: true, changeSize: true}); 



       } 



       $(window).load(function(){ 
       $(function() { 
        $('#svgbasics').svg({onLoad: drawOpenSwitch}); 
       }); 





       });//]]> 

       </script> 


       </head> 
       <body> 
       <div id="svgbasics"></div> 


       </body> 


       </html> 

ответ

0

Оказывается, проблема была в том, что я с помощью линий со стрелками-концами (Inkscape) ... линий, где часть q1Button, но стрелы не были. Поэтому он работал только тогда, когда у меня был указатель мыши над тонкими линиями под головой стрелы. Замена группы фигур под названием q1Button & f1Button решила проблему.

Смежные вопросы