Question

我正在尝试这种情况，但它不起作用。我想在单击另一个元素时切换元素上的类。

下面是我的html / css / jquery

HTML

<div class="box1"></div>
<div class="box2"></div>

CSS

.box1 {
  height: 100px;
  width: 100px;
  background: red;
}

.blue{
  background: blue;
}
.box2{
   height: 100px;
  width: 100px;
  background: yellow;
}

jquery的

$('.box1').click(function(){
 $('.box2').toggleClass('blue'); 
});

可以在这里查看liveweave。我已经在互联网上搜索了，我认为我的代码没有错误，但我仍然不明白为什么它不起作用

http://liveweave.com/zIfs3U

请某人指导

Answer 1

由于.box2和.blue类具有相同的优先级（它们都是类名），因此必须在blue之后放置.box2以使其更高并且适用：

.box2 {
  height: 100px;
  width: 100px;
  background: yellow;
}
.blue {
  background: blue;
}

总结：如果CSS选择器具有相同的权重（如上所述），则应用最后定义的那个。

另一个选择是写这样的CSS规则（首选）：

.box2 {
  height: 100px;
  width: 100px;
  background: yellow;
}
.box2.blue {
  background: blue;
}

了解"CSS Specificity: Things You Should Know"，了解重要信息。

Answer 2

试一试。

<强>的jQuery

$('.box1').click(function (e) {
    $('.box2').toggleClass('blue');
});

<强> CSS

.box1 {
    height: 100px;
    width: 100px;
    background-color: red;
}
.box2 {
    height: 100px;
    width: 100px;
    background-color: yellow;
}
.blue {
    background-color: blue;
}

jsFiddle

Answer 3

试试这个

$('.box1').on('click', function(){
  $('.box2').toggleClass('blue'); 
});

toggleClass不在另一个元素上工作

3 个答案: