javascript - CSS-jquery单击色板图标更改背景色板

我希望在单击特定样本时更改页面背景。我的jQuery代码似乎不起作用。有什么想法吗？

$(".black swatch").click(function() {
  $("body").addClass("black");
});

.swatch {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  float: left;
  margin-right: 20px;
  border: 1px solid #000;
}
.black {
  background-color: #000;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="swatches">
  <div class="black swatch"></div>

最佳答案

你想要这样吗？这是因为您只单击.swatch div，然后才运行脚本来添加类。

$(".swatch").click(function() {
  $("body").addClass("black");
});

.swatch {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  float: left;
  margin-right: 20px;
  border: 1px solid #000;
}
.black {
  background-color: #000;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="swatches">
  <div class="black swatch"></div>

关于javascript - CSS-jquery单击色板图标更改背景色板，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38945616/