Question

我有以下div：

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

My 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中的背景图片更改为.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>

javascript从div id添加/删除类？

1 个答案: