点击更改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'); 
    }); 

});