jQuery代码未运行

问题描述

我想在单击div1后更改其颜色.

i want to change the color of my div1 after clicking it.

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

when I click div1 it must change its background color to #4A6B4C but that's not happening. kindly help. thanks

$(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>

推荐答案

使用id更新选择器或使用!important作为样式值，因为具有id的样式具有更高的优先级.

Update the selector with id or use !important with the style value since style with id has the higher priority.

#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>

这篇关于jQuery代码未运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！