点击更改背景颜色

Question

我试图允许用户通过单击其中一个框来更改背景颜色。

我进入了这段代码，但是没有用：

$(document).ready(function() {
  $("ul li a").click(function() {
    var Color = $(this).attr("data-color");
    $("body").css("background", Color);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="color-boxes">
  <li>
    <a data-color="#000000" class="Black" href="#"></a>
  </li>
  <li>
    <a data-color="#7E392F" class="BurntHenna" href="#"></a>
  </li>
  <li>
    <a data-color="#AE856C" class="TawnyBirch" href="#"></a>
  </li>
  <li>
    <a data-color="#DAB58F" class="Sheepskin" href="#"></a>
  </li>
</ul>

Answer 1

我们在您的问题中缺少一些CSS。我之所以回答是因为您似乎错过了jQuery库，但也许您确实有它和一些CSS，可以将链接扩展为可点击的内容

如果您添加了jQuery库并以某种方式使链接可见，文本或在这种情况下显示为带有填充的内联块，则此方法有效

pig -version

$(document).ready(function() {
  $("ul li a").click(function(e) {
    e.preventDefault(); // not strictly needed but a good idea
    const color = $(this).data("color");
    $("body").css("background", color);
  });
  $("[data-color]").each(function() {
    $(this).closest("li").css({"background-color": this.dataset.color})
  })
});

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
  display:inline-block;
  padding:15px;
}

.color-boxes {
  display: inline-block;
  float: right
}