javascript從div ID添加/刪除類？

Question

我有以下div：

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

我的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，我想我的股利更衣室“的背景圖像與背景圖像中改變#locker到一個在.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>