单击时更改背景颜色

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 库和某种方式使链接可见，文本或在这种情况下显示带有填充的内联块，则此方法有效

 $(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 }

 <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="#" title="Black"></a> </li> <li> <a data-color="#7E392F" class="BurntHenna" href="#" title="BurntHenna"></a> </li> <li> <a data-color="#AE856C" class="TawnyBirch" href="#" title="TawnyBirch"></a> </li> <li> <a data-color="#DAB58F" class="Sheepskin" href="#" title="SheepSkin"></a> </li> </ul>