j查詢事件處理程序

我有一個有11個站的svg的路線圖。電臺用圓圈表示，所以我有11個圓圈。我需要在jQuery中的代碼，它執行以下操作： -j查詢事件處理程序

單擊的第一個圓應視爲源。
點擊的第二個圈子應視爲目的地。
此後點擊任何圓圈，js彈出源和目標已被選中。
上確認的源和目的地，我將加載使用細節一個div（這我可以經由AJAX調用做）

的SVG代碼附加與此有關。我有php代碼從數據庫中獲取所有內容。幫我解決這個問題！

 !doctype html> 
      <html lang="en"> 
      <head> 
       <meta charset="utf-8"> 


       </head> 

     <body> 
<object data="route.svg" type="image/svg+xml" id="route_svg" width="100%" height="100%">  </object> 

    <svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 

     width="1000" 
     height="1000" 
     viewBox="-350 -100 1000 1000"> 

    <!--Versova--> 
     <text x="60" y="40">Versova</text> 
     <circle cx="40" cy="40" r="8" class="station" id="versova" 
     style="stroke:#006600; 
     stroke-width: 3; 
     fill:#00cc00"/> 
     <line x1="43" y1="45" x2="92" y2="112" style="stroke:#006600; stroke-width:3"/> 

     <!--DN Nagar--> 
     <text x="100" y="95">D N Nagar</text> 
     <circle cx="90" cy="110" r="8" class="station" id="dnnagar" 
     style="stroke:#006600; 
     stroke-width: 3; 
     fill:#00cc00"/>  
     <line x1="95" y1="115" x2="141" y2="140" style="stroke:#006600; stroke- width:3"/> 

     <!--Azad Nagar--> 
     <text x="162" y="137">Azad Nagar</text> 
     <circle cx="141" cy="138" r="8" class="station" id="azadnagar" 
     style="stroke:#006600; 
     stroke-width: 3; 
     fill:#00cc00"/>  
     <line x1="146" y1="141" x2="238" y2="188" style="stroke:#006600; stroke-width:3"/> 

    <!--Andheri--> 
     <text x="160" y="192">Andheri</text> 
     <circle cx="230" cy="186" r="8" class="station" id="andheri" 
     style="stroke:#006600; 
     stroke-width: 3; 
     fill:#00cc00"/>  
     <line x1="236" y1="188" x2="272" y2="205" style="stroke:#006600; stroke-width:3"/> 

     <!--WEH--> 
     <text x="294" y="205">WEH</text> 
     <circle cx="280" cy="207" r="8" class="station" id="weh" 
     style="stroke:#006600; 
     stroke-width: 3; 
     fill:#00cc00"/>  
     <line x1="286" y1="210" x2="332" y2="230" style="stroke:#006600; stroke-width:3"/>   

     <!--Chakala--> 
     <text x="265" y="240">Chakala</text> 
     <circle cx="332" cy="230" r="8" class="station" id="chakala" 
     style="stroke:#006600; 
     stroke-width: 3; 
     fill:#00cc00"/>  
     <line x1="337" y1="233" x2="366" y2="244" style="stroke:#006600; stroke-width:3"/>   

    <!--Airport--> 
     <text x="394" y="240">Airport</text> 
     <circle cx="374" cy="246" r="8" class="station" id="airport" 
     style="stroke:#006600; 
     stroke-width: 3; 
     fill:#00cc00"/>  
     <line x1="380" y1="250" x2="415" y2="270" style="stroke:#006600; stroke-width:3"/>   

     <!--Marol--> 
     <text x="360" y="280">Marol</text> 
     <circle cx="415" cy="270" r="8" class="station" id="marol" 
     style="stroke:#006600; 
     stroke-width: 3; 
     fill:#00cc00"/>  
     <line x1="420" y1="274" x2="460" y2="298" style="stroke:#006600; stroke-width:3"/>  

     <!--Saki Naka--> 
     <text x="388" y="320">Saki Naka</text> 
     <circle cx="460" cy="300" r="8" class="station" id="sakinaka" 
     style="stroke:#006600; 
     stroke-width: 3; 
     fill:#00cc00"/> 
     <line x1="465" y1="307" x2="490" y2="347" style="stroke:#006600; stroke-width:3"/>  

     <!--Asalpha--> 
     <text x="510" y="350">Asalpha</text> 
     <circle cx="490" cy="350" r="8" class="station" id="asalpha" 
     style="stroke:#006600; 
     stroke-width: 3; 
     fill:#00cc00"/> 
     <line x1="495" y1="356" x2="535" y2="385" style="stroke:#006600; stroke-width:3"/> 

     <!--Ghatkopar--> 
     <text x="448" y="390">Ghatkopar</text> 
     <circle cx="530" cy="380" r="8" class="station" id="ghatkopar" 
     style="stroke:#006600; 
     stroke-width: 3; 
     fill:#00cc00"/> 

    </svg> 

    </body> 

    </html>

來源

2014-07-19 Ameya . Walawalkar

男人你是真棒！ –

這裏的的jsfiddle：http://jsfiddle.net/fTaz3/

JS：

var src = ''; 
var dest = ''; 

$('circle').click(function() { 
    if (src === '') { 
     src = $(this).attr('id'); 
     alert('Source selected : ' + src); 
     return; 
    } 
    if (dest === '') { 
     dest = $(this).attr('id'); 
     alert('Destn selected : ' + dest); 
     return; 
    } 
    alert('source[' + src + '] and destination[' + dest + '] already selected'); 
});

來源

2014-07-19 14:40:51

j查詢事件處理程序

回答

相關問題