Javascript 单击-jQuery更改SVG填充覆盖

我试图使用jQuery click事件处理程序更改SVG对象的颜色，但单击后颜色恢复正常

请看这里：

如何永久更改颜色

<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>

问题：老鼠屎。单击鼠标后，会发生重置颜色的鼠标移出

解决方案：使用标志

演示：

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

});