Question

我在svg有11个站点的路线图。这些电台用圆圈表示，所以我有11个圆圈。我需要jquery中的代码，它执行以下操作： -

点击的第一个圆圈应视为来源。
点击的第二个圆圈应视为目的地。
此后点击任意一个圈子，已经选择了源和目标的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>

Answer 1

这是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');
});

jquery事件处理程序

1 个答案: