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，我希望我的 Div 'locker' 的背景图像从 #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>