活动按钮状态

Question

我是javascript的新手，我在制作SVG编辑器方面遇到了一些困难。 首先，我的SVG附近有3个按钮，一个用于绘制一条线，一个用于矩形形式，一个用于清除SVG。当我点击第一个按钮我想绘制一个矩形元素，如果我点击第二个按钮我想能画一条线。

这是我的代码：

line.js

$(window).load(function(){
$('.uiButton2').click(function()
{
    $(this).toggleClass('uiButtonActive2');
});
});





    function makeLine(x1, y1, x2, y2){

 var vLine = document.createElementNS("http://www.w3.org/2000/svg", "line")

 vLine.setAttributeNS( null, "x1", x1 + "px");

 vLine.setAttributeNS( null, "y1", y1 + "px" );

 vLine.setAttributeNS( null, "x2", x2 + "px" );

 vLine.setAttributeNS( null, "y2", y2 + "px" );

 vLine.setAttributeNS( null, "style", "stroke-width:2;stroke:red");

 return vLine;

}




    $(function() {

    if($("button2").hasClass('.uiButtonActive2'){
     $("#editor")
    .mousedown(function(e){
        x1 = e.pageX- this.getBoundingClientRect().left;
        y1 = e.pageY - this.getBoundingClientRect().top;


    })
    .mousemove(function(e){
        x2=e.pageX- this.getBoundingClientRect().left;
        y2= e.pageY - this.getBoundingClientRect().top;

    })
    .mouseup(function(e){
        var vLine = makeLine(x1,y1,x2,y2);
        $("#myLine").show();
        $("#elemente").append(vLine);

    })
}
    });

rect.js 


        $(window).load(function(){
    $('.uiButton').click(function()
    {
        $(this).toggleClass('uiButtonActive');
    });
    });




        $.fn.setareCoordonate = function (x1, y1, x2, y2) {
            return this.attr({
                x: Math.min(x1, x2),
                y: Math.min(y1, y2),
                width: Math.max(x1, x2) - Math.min(x1, x2),
                height: Math.max(y1, y2) - Math.min(y1, y2)
            });
        }



       $(function () {
            var MOUSE_LEFT = 1, MOUSE_RIGHT = 3, KEY_DEL = 46;
            var x1 = 0, y1 = 0;
            var elementSelectat = null;


            if($("button1").hasClass('.uiButtonActive'){
            $("#editor")
                .mousedown(function (e) {                    
                    if (e.which == MOUSE_LEFT) {
                        x1 = e.pageX - this.getBoundingClientRect().left;
                        y1 = e.pageY - this.getBoundingClientRect().top;

                        $("#selectie")
                            .setareCoordonate(x1, y1, x1, y1)
                            .show();
                    }
                })
                .mouseup(function (e) {
                    if (e.which == MOUSE_LEFT ) {
                        x2 = e.pageX - this.getBoundingClientRect().left;
                        y2 = e.pageY - this.getBoundingClientRect().top;

                        $("#selectie").hide();

                        $(document.createElementNS("http://www.w3.org/2000/svg", "rect"))
                            .setareCoordonate(x1, y1, x2, y2)
                            .mousedown(function (e) {
                                if (e.which == MOUSE_RIGHT) {
                                    $("#elemente rect").attr("class", "");
                                    $(this).attr("class", "selectat");
                                    elementSelectat = this;
                                }
                            })
                            .appendTo($("#elemente"));
                    }
                })
                .mousemove(function (e) {
                    x2 = e.pageX - this.getBoundingClientRect().left;
                    y2 = e.pageY - this.getBoundingClientRect().top;

                    $("#selectie")
                        .setareCoordonate(x1, y1, x2, y2);
                })
                .contextmenu(function () {
                    return false;
                });

            $(document).keydown(function (e) {
                if (elementSelectat && e.keyCode == KEY_DEL) {
                    elementSelectat.remove();
                }
                else if (elementSelectat && e.keyCode == 107) {
                    $(elementSelectat).css("fill",
                        "#" + Math.floor(Math.random() * 16777215).toString(16));
                }
            });
        });
        }
        });


and my HTML + CSS (for buttons)


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="style/svg_style.css">
 <style type="text/css">
line {
 stroke: black;
 stroke-width: 1px; </style>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="js/color.js"></script>
<script src="js/rect.js"></script>
<script src="js/line.js"></script>
<body>
<div id="svg_editor">
    <div id="svg_color_change"> 
<svg id="svg_title""xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" id="myrect" onclick="doRectClick()" />
   <text id="mytext"  x="60" y="60" style="fill:rgb(0,0,255)" font-size="30" onclick="doRectClick1();">SVG EDITOR</text>
</svg>
</div>
    <svg id="editor">
        <svg id="elemente"></svg>
        <rect id="selectie" width="0" height="0" style="display:none;"></rect>
        <line id="myLine" style="stroke:rgb(255,0,0);stroke-width:2" />
        </svg>

<div id="drawing_tools"> 
    <p id="tools_text"> <b>Drawing tools </b></p>
    <input type="button" class="uiButton" id="button1" value="button1">
    <input type="button" class="uiButton2" id="button2" value="button2">
    <input type="button" class="uiButton3" id="button3" value="button3">    
</div>
</div>
</body>
</html>





iButton{
background-color:red;
position:absolute;
right:20px;
}

.uiButton:active{
background-color:blue;
}

.uiButtonActive{
background-color:blue;
}

.uiButton2{
background-color:red;
position:absolute;
top:82px;
right:20px;
}

.uiButton2:active{
background-color:blue;
}

.uiButtonActive2{
background-color:blue;
}

.uiButton3{
background-color:red;
position:absolute;
top:110px;
right:20px;}

.uiButton3:active{
background-color:blue;
}

.uiButtonActive3{
background-color:blue;
}