Question

我们为第一个div使用click功能，当我单击它时，它的css将显示，当我单击除第一个div以外的另一个div时的操作，那么第一个div的css将消失

$(document).ready(function(){

         $('#Radio1').click(function(){
             $('.RadioBack').css({'background-color':'lightgray','min-height':'100px'});
         });
       });

但是，只有当我单击div RadioBack的radio1 css时，它才会显示，但是当我单击div radio2时，RadioBack的radioo，radio4 css将永远不会消失

Answer 1

您没有包含任何html，所以我使用的是简单的红色框，蓝色框。

建议您在样式表中添加更改，然后在要更改颜色的div上切换类名，而不是在jQuery中指定css。

在此示例中，单击红色框使其变为灰色，然后单击蓝色框再次使其变为红色。由于使用了:not()选择器来更改背景颜色，因此点击灰色框不会将其变为红色。

$(document).ready(function() {
  //When click on this div, change background colour.
  $('#Radio1').click(function() {
    $('.RadioBack').addClass('lightgray');
  });
  
  //When click on any other div, change background colour back.
  $('div:not(#Radio1)').click(function() {
    $('.RadioBack').removeClass('lightgray');
  });
});

div {
  width: 100px;
  height: 100px;
  background: red;
}

div+div {
  background: blue;
}

div.lightgray {
      background-color:lightgray;
      min-height:100px'
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="Radio1" class="RadioBack"></div>
<div></div>

当我单击除第一个div以外的另一个div时，我会怎么做，那么第一个div的CSS将会消失？

1 个答案: