jquery效果 简单的按钮效果点击交替

需求：

    有三个门的状态按钮图标，分别表示开门、关门、停止状态。三种按钮在同一时间只能有一种效果激活

思路：

    给每一个状态一个id，根据id判断需要控制的是哪一种状态，在通过class赋予激活效果，判断当前按钮的id是否具有激活状态的class属性，根据需求，添加或者移除class属性

jQuery代码：

    

$(document).ready(function(){
    $("a.btn").click(function(){
        
        //开门
        if($(this).find('div').attr('id') == "door_open"){
            if($('#door_open').hasClass('door_open')){
                alert('门已经打开')
            }else {
                $("#door_open").addClass("door_open");
                $("#door_stop").removeClass("door_stop");
                $("#door_close").removeClass("door_close");
            }
        }else if($(this).find('div').attr('id') == "door_close"){
           if($('#door_close').hasClass('door_close')){
                alert('门已经关闭')
            }else {
                $("#door_open").removeClass("door_open");
                $("#door_stop").removeClass("door_stop");
                $("#door_close").addClass("door_close");
            }
        }else if($(this).find('div').attr('id') == "door_stop"){
           if($('#door_stop').hasClass('door_stop')){
                alert('门已经停止')
            }else {
                $("#door_open").removeClass("door_open");
                $("#door_stop").addClass("door_stop");
                $("#door_close").removeClass("door_close");
            }
        }

});

html和css代码就不贴上去了 

才接触jQuery 如果有更好的方法，希望给一个思路,谢谢！