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

Question

我觉得我在这里缺少一些非常基本的东西。

我基本上在标记中有 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>

Answer 1

您需要添加#block1 以及您的.change 以覆盖#block1 中给定的背景颜色。希望这就是您要找的。

   $("#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;
    }

#block1.change {
  background: red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block1">
   </div>

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