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>

Answer 2

使用.on绑定事件。

另请参阅我在CSS中所做的更改。你的风格需要更具体。

$(document).ready(function() {

  $('#div1').on("click", function() {
    $(this).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.op1.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>

Answer 3

您的JS代码是正确的。一个好的做法是永远不要在css中使用id，因为id总是唯一的，并且这个id的css不可重复使用。我已将您的代码从id更改为类。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    .divclass{ 
      background-color:#33C43C;
      width:40px;
      height:40px;
      border-radius:50%;
      color:white;text-align:
      center;font-size:30px;
    }
    .hoverclass:hover{
       cursor:pointer;
       background-color:#4A6B4C;
    }
    .change{
      background-color:#4A6B4C;
    } 
  </style>
</head>
<body>
  <div id="div1" class="op1 divclass hoverclass">
    S
  </div>
  <br><br>
  <div id="div2" class="op divclass hoverclass">
    M
  </div>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script>    
    $(document).ready(function(){
      $('#div1').click(function(){
        $('#div1').toggleClass('change'); 
      });  
    });
  </script>
</body>
</html>

jquery代码未运行

3 个答案: