jquery - ID选择器在jQuery中不起作用

我觉得我在这里错过了一些非常基本的东西。

我基本上在标记中有2个div。当您单击一个（#x）时，另一个（＃block1）将获得一个新的类（.change），并更改其颜色。

唯一的问题是点击功能内的选择器（“＃block1”）。如果我将第一个div的ID替换为一个类，则可以正常工作。但是使用id会使它无效。

$(document).ready(function() {
  $("#x").click(function() {
    $("#block1").toggleClass("change");
  });
});

#block1 {
  width: 20vw;
  height: 20vw;
  background: gold;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

#x {
  height: 5vw;
  width: 5vw;
  background: #333;
  position: relative;
  right: -60vw;
  top: -15vw;
  cursor: pointer;
}

.change {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div id="block1"></div>
<div id="x"></div>

最佳答案

由于样式优先，您的班级.change不会覆盖#block1中设置的背景色。

在这种特定情况下，您将必须更加具体。

更改此：

.change {
    background: red;
}

对此：

#block1.change {
    background: red;
}