點擊更改SVG填充覆蓋 - jQuery

Question

我試圖用jQuery單擊事件處理程序更改SVG對象的顏色，但點擊後顏色恢復正常。

在這裏看到：http://jsfiddle.net/6wwUm/

我怎樣才能永久地改變顏色？

<svg> 
    <line class = "A1" fill="none" stroke="#000000" stroke-width="3.8417" x1="73.208" y1="73.341" x2="99.923" y2="73.341"/> 

    <polygon class = "A1" points="97.23,82.618 97.176,72.229 97.121,61.843 106.145,66.987 115.169,72.136 106.2,77.377 "/> 

</svg> 

<script> 
    $(document).ready(function() { 
     $(".A1").mouseover(function(){ 
      $(".A1").css('fill', '158844'); 
      $(".A1").css('stroke', '158844'); 
     }); 

     $(".A1").mouseout(function(){ 
      $(".A1").css('fill', '#000000'); 
      $(".A1").css('stroke', '#000000'); 
     }); 

     $(".A1").click(function(){ 
      $(".A1").css('fill', '158844'); 
      $(".A1").css('stroke', '158844'); 
      $("#appearOnAcross").show(); 
      $("#appearOnDown").hide(); 
      alert('jQuery Alert') 
     }); 

    }); 
</script> 

Answer 1

問題：mouseout。發生後clickmouseout會重置您的顏色。

解決方案：使用標誌。

演示：http://jsfiddle.net/abhitalks/6wwUm/1/

JS：

$(document).ready(function() { 

    var flag = true; // take a flag here 

    $(".A1").mouseover(function() { 
     if (flag) { // check flag before change 
      $(".A1").css('fill', '158844'); 
      $(".A1").css('stroke', '158844'); 
     } 
    }); 

    $(".A1").mouseout(function() { 
     if (flag) { // check flag before change 
      $(".A1").css('fill', '#000000'); 
      $(".A1").css('stroke', '#000000'); 
     } 
    }); 

    $(".A1").click(function() { 
     flag = false; // reset flag 
     $(".A1").css('fill', '158844'); 
     $(".A1").css('stroke', '158844'); 
    }); 

});