如何用jQuery、HTML和CSS实现点击切换多种可选背景色？

Hey Eric, let's get that multi-color background switcher working right! Your current code has a few small issues keeping it from working as expected—let's break down the fixes and walk through the corrected version.

First, Let's Fix the Issues in Your Original Code #

• jQuery css() Method Misuse: You tried passing multiple color values to $('body').css(), but this method only accepts one value per property. We need to store our color options in an array and pick one each time the button is clicked.
• Invalid CSS: body { height: ; } is invalid syntax—use height: 100vh to make the body take up the full viewport height.
• Conflicting Hover Styles: You added two background properties to the button's hover state; the second one will always override the first. We'll clean that up and add a smooth transition for better UX.
• Unresponsive Button Placement: margin-left: 550px will break on smaller screens—we'll center the button properly with display: block and margin: 0 auto.

Corrected Full Code #

HTML #

<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 #

body {
  height: 100vh; /* Full viewport height */
  background: #D8D8D8;
  transition: background 0.3s ease; /* Smooth color transition */
  margin: 0; /* Remove default body margin */
}

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

#btn {
  display: block; /* Allow centering with margin auto */
  margin: 0 auto;
  width: 200px;
  height: 100px;
  font-size: 2em;
  border-radius: 10px;
  background: #ffffff;
  border: none; /* Remove default button border */
  cursor: pointer; /* Show pointer on hover */
  transition: all 0.3s ease; /* Smooth hover transition */
}

#btn:hover {
  background: #ff0000; /* Single hover background color */
  color: #ffffff;
}

JavaScript (jQuery) #

$(document).ready(function() {
  // Define your array of background color options
  const bgColors = ['#ff0000', '#80ff33', '#3380ff', '#ffcc00', '#9933ff'];
  
  $('#btn').click(function() {
    // Pick a random color from the array
    const randomColor = bgColors[Math.floor(Math.random() * bgColors.length)];
    // Apply the color to the body
    $('body').css('background', randomColor);
  });
});

How It Works #

1. Color Array: We store all our desired background colors in an array—you can add as many as you want here!
2. Random Selection: On each button click, Math.random() picks a random index from the array, giving us a new color every time.
3. Smooth Transitions: The transition CSS property makes the color change feel polished instead of abrupt.
4. Responsive Layout: The button is now centered properly, so it works on all screen sizes.

Bonus: Cycle Through Colors Instead of Random #

If you prefer to cycle through colors in order instead of randomizing, use an index counter:

$(document).ready(function() {
  const bgColors = ['#ff0000', '#80ff33', '#3380ff', '#ffcc00', '#9933ff'];
  let currentIndex = 0;
  
  $('#btn').click(function() {
    $('body').css('background', bgColors[currentIndex]);
    // Reset index when we reach the end of the array
    currentIndex = (currentIndex + 1) % bgColors.length;
  });
});

内容的提问来源于stack exchange，提问作者Eric Ramos