使用 jquery 将单击时背景的颜色更改为多种颜色答案

【问题标题】：Change color of a background on click to a multiple choice of color us with jquery使用 jquery 将单击时背景的颜色更改为多种颜色
【发布时间】：2020-06-03 13:38:26
【问题描述】：

我正在尝试添加多种颜色选择？我怎样才能用 HTML 和 CSS 做到这一点？我不知道如何正确添加多种颜色选择这是我的代码

$(document).ready(function() {
      $('#btn').click(function() {
        $('body').css('background', '#ff0000', '#80ff33');
      });

body {
  height: ;
  background: #D8D8D8;
}

.text {
  color: #686868;
  font-family: arial;
  font-size: 2em;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 20px;
}

#btn {
  margin-left: 550px;
  width: 200px;
  height: 100px;
  font-size: 2em;
  border-radius: 10px;
  background: #ffffff;
}

#btn:hover {
  background: #ff0000;
  background: #80ff33;
  color: #ffffff;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section class="text">
  CLICK THE BUTTON TO<br> CHANGE THE BACKGROUND!
</section>
<button id="btn">CLICK ME!</button>

【问题讨论】：

你想改变jquery中的文字颜色吗？
我认为你需要组织你的问题并展示你的尝试
您所说的“多项选择”是什么意思？所以你想要有多个按钮，每个按钮都用不同的颜色改变 body 的背景颜色？\
这能回答你的问题吗？ javascript change background color on click

标签： jquery html css

【解决方案1】：

$(document).ready(function() {
      $('#btn').click(function() {
        $('body').css('background', '#ff0000', '#80ff33');
      });
});

body {
  height: ;
  background: #D8D8D8;
}

.text {
  color: #686868;
  font-family: arial;
  font-size: 2em;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 20px;
}

#btn {
  margin-left: 550px;
  width: 200px;
  height: 100px;
  font-size: 2em;
  border-radius: 10px;
  background: #ffffff;
}

#btn:hover {
  background: #ff0000;
  background: #80ff33;
  color: #ffffff;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section class="text">
  CLICK THE BUTTON TO<br> CHANGE THE BACKGROUND!
</section>
<button id="btn">CLICK ME!</button>

【讨论】：

【解决方案2】：

你没有正确关闭你的函数

$(document).ready(function() {
  $('#btn').click(function() {
    $('body').css('background', '#ff0000', '#80ff33');
  });
});

演示：

$(document).ready(function() {
  $('#btn').click(function() {
    $('body').css('background', '#ff0000', '#80ff33');

  });

});

body {
    height: ;
    background: #D8D8D8;
}

.text {
    color: #686868; 
    font-family: arial;
    font-size: 2em;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 20px;
}

#btn {
    margin-left: 550px;
    width: 200px;
    height: 100px;
    font-size: 2em;
    border-radius: 10px;
    background: #ffffff;
}

#btn:hover {
    background: #ff0000;
    background: #80ff33 ;
    color: #ffffff;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section class="text">
  CLICK THE BUTTON TO<br> CHANGE THE BACKGROUND!
</section>
<button id="btn">CLICK ME!</button>

你可以使用几种方法，一种是更新css自定义属性

data-attribute 中的可能示例，因此您可以轻松添加任意数量的按钮颜色：

javascript 版本

DEMO 或下面的sn-p

for (let e of document.querySelectorAll("button")) {
  cust = e.dataset.bgcolor;
  e.style.background = cust;
  e.textContent = cust;
  e.addEventListener("click", function() {
    cust = e.dataset.bgcolor;
    document.documentElement.style.setProperty("--bgColor", cust);

  });
}

html {
  background: #D8D8D8;
}

body {
  margin: 0;
  height: 100vh;
  background: var(--bgColor);
}

.text {
  color: #686868;
  font-family: arial;
  font-size: 2em;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 20px;
}

.grid {
  display: grid;
  width: 200px;
  grid-template-columns: repeat(2, 1fr);
  margin: auto;
}

<section class="text">
  CLICK THE BUTTON TO<br> CHANGE THE BACKGROUND!
</section>
<div class="grid">
  <button data-bgcolor="orange">bgcolor:</button>
  <button data-bgcolor="white">bgcolor:</button>
  <button data-bgcolor="lightblue">bgcolor:</button>
  <button data-bgcolor="lightgreen">bgcolor:</button>
  <button data-bgcolor="brown">bgcolor:</button>

jQuery 等效 sn-p :

$("button").each(function() {
  bg = $(this).data("bgcolor");
  $(this).css("background", bg);
  $(this).html(bg);
  $(this).click(function() {
    bg = $(this).data("bgcolor");
    $("html").css("--bgColor", bg);
  });
});

html {
  background: #D8D8D8;
}

body {
  margin: 0;
  height: 100vh;
  background: var(--bgColor);
}

.text {
  color: #686868;
  font-family: arial;
  font-size: 2em;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 20px;
}

.grid {
  display: grid;
  width: 200px;
  grid-template-columns: repeat(2, 1fr);
  margin: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="text">
  CLICK THE BUTTON TO<br> CHANGE THE BACKGROUND!
</section>
<div class="grid">
  <button data-bgcolor="orange">bgcolor:</button>
  <button data-bgcolor="white">bgcolor:</button>
  <button data-bgcolor="lightblue">bgcolor:</button>
  <button data-bgcolor="lightgreen">bgcolor:</button>
  <button data-bgcolor="brown">bgcolor:</button>

【讨论】：

你能用jquery做吗
@EricRamos 为什么要添加一个 jQuery 库，而 javascript 不需要它来减少使用的代码和资源？你可以这样做：for (let e of $l("button")) {
这是因为我正在学习如何编写代码，他们要求我们使用 jquery 进行编码
jQuery 将是：$("button").each(function() { bg = $(this).data("bgcolor"); $(this).css("background", bg); $(this).click(function() { bg = $(this).data("bgcolor"); $("html").css("--bgColor", bg); }); });
很抱歉再次打扰您，我尝试更改字体颜色，同时背景更改您知道怎么做吗？

【解决方案3】：

您可以通过点击事件更改点击时的正文颜色

body {
    height: ;
    background: #D8D8D8;
}

.text {
    color: #686868; 
    font-family: arial;
    font-size: 2em;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 20px;
}

#btn {
    margin-left: 550px;
    width: 200px;
    height: 100px;
    font-size: 2em;
    border-radius: 10px;
    background: #ffffff;
}

#btn:hover {
    background: #ff0000;
    background: #80ff33 ;
    color: #ffffff;
}

</script>
<section class="text">
  CLICK THE BUTTON TO<br> CHANGE THE BACKGROUND!
</section>
<button id="btn" onclick="document.body.style.backgroundColor = 'green';">Click Me</button>

【讨论】：