jquery 代码没有运行

Question

我想在点击后更改我的 div1 的颜色。

当我单击 div1 时，它必须将其背景颜色更改为 #4A6B4C，但那没有发生。请帮助。谢谢

$(document).ready(function()
{
    
 $('#div1').click(function()
 {
   $('#div1').toggleClass('change'); 
  });  
   });
    
   

#div1{ background-color:#33C43C;width:40px;height:40px;
border-radius:50%;color:white;text-align:center;font-size:30px;}
#div2{text-align:center; color:white;background-color:#33C43C;width:40px;height:40px;border-radius:50%;font-size:30px;}
#div1:hover{cursor:pointer;background-color:#4A6B4C;}
#div2:hover{cursor:pointer;background-color:#4A6B4C;}
.change{background-color:#4A6B4C;} /* div1 must change to this color */

<div id="div1" class="op1">
S
</div>
<br><br>
<div id="div2" class="op">
M
</div>

Answer 1

使用 id 更新选择器或将 !important 与样式值一起使用，因为带有 id 的样式具有更高的优先级。

#div1.change{
   background-color:#4A6B4C;
}

$(document).ready(function() {
  $('#div1').click(function() {
    $('#div1').toggleClass('change');
  });
});

#div1 {
  background-color: #33C43C;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: white;
  text-align: center;
  font-size: 30px;
}

#div2 {
  text-align: center;
  color: white;
  background-color: #33C43C;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 30px;
}

#div1:hover {
  cursor: pointer;
  background-color: #4A6B4C;
}

#div2:hover {
  cursor: pointer;
  background-color: #4A6B4C;
}

#div1.change {
  background-color: #4A6B4C;
}


/* div1 must change to this color */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="op1">
  S
</div>
<br><br>
<div id="div2" class="op">
  M
</div>

---

.change{
   background-color:#4A6B4C !important;
}

$(document).ready(function() {
  $('#div1').click(function() {
    $('#div1').toggleClass('change');
  });
});

#div1 {
  background-color: #33C43C;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: white;
  text-align: center;
  font-size: 30px;
}

#div2 {
  text-align: center;
  color: white;
  background-color: #33C43C;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 30px;
}

#div1:hover {
  cursor: pointer;
  background-color: #4A6B4C;
}

#div2:hover {
  cursor: pointer;
  background-color: #4A6B4C;
}

.change {
  background-color: #4A6B4C !important;
}


/* div1 must change to this color */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="op1">
  S
</div>
<br><br>
<div id="div2" class="op">
  M
</div>