單擊更改SVG填充替代-jQuery

Question

我正在嘗試使用jQuery click事件處理程序更改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 。 click后， click mouseout會重置您的顏色。

解決方案 ：使用標志。

演示 ： 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');
    });

});