javascript添加/從div ID中刪除類？

Question

我有以下DIV：

<div id="locker"></div> 

我的事業部ID使用下面的CSS樣式：

#locker{ 
      width:20px; 
height:20px; 
background-repeat: no-repeat; 
background-size:15px 15px; 
background-position:5px center; 
-webkit-border-radius: 20px; 
-moz-border-radius: 20px; 
border-radius: 20px; 
border-style:solid; 
border-width:1px; 
border-color:#fff; 
padding:3px; 
position:relative; 
text-align: center; 
margin:auto; 
filter: invert(75%); 
    -webkit-filter: invert(75%); 
    background-image: url('../images/padlock.png'); 


     } 

我也有一類造型：

    .locker2{ 
background-image: url('../images/key.png'); 
     } 

當用戶點擊我的另一個div我正在運行下面的javascript，我希望我的Div'locker'的背景圖像從#locker中的背景圖像更改爲E在.locker2

以下是我正在努力做到這一點：

<script> 
    $('#edit').click(function(){ 
    $('input').prop('disabled', false); 
    $('input').css("background", "transparent"); 
    $('#locker').removeClass('#locker').addClass("locker2"); 
    $('#submit').css("display", "block"); 
}); 
</script> 

然而，背景圖像不發生變化。請有人告訴我我要去哪裏錯了嗎？由於

Answer 1

locker是元素不是一個類的ID，所以造型的目的，是比較容易的結構改變爲一類像

$('#edit').click(function() { 
 
    $('input').prop('disabled', false); 
 
    $('input').css("background", "transparent"); 
 
    $('#locker').removeClass('locker').addClass("locker2"); 
 
    $('#submit').css("display", "block"); 
 
});

#locker { 
 
    width: 20px; 
 
    height: 20px; 
 
    background-repeat: no-repeat; 
 
    background-size: 15px 15px; 
 
    background-position: 5px center; 
 
    -webkit-border-radius: 20px; 
 
    -moz-border-radius: 20px; 
 
    border-radius: 20px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: #fff; 
 
    padding: 3px; 
 
    position: relative; 
 
    text-align: center; 
 
    margin: auto; 
 
    filter: invert(75%); 
 
    -webkit-filter: invert(75%); 
 
} 
 
.locker { 
 
    background-image: url('//placehold.it/32X32/ff0000'); 
 
} 
 
.locker2 { 
 
    background-image: url('//placehold.it/32X32/ff00ff'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button id="edit">Edit</button> 
 
<div id="locker" class="locker"></div>