求助实现点击循环切换Div背景色并同步更新data属性

Hey Eugenio, let's get your box layout working exactly how you want it! First, let's tackle the issues in your original code, then implement the state cycling, hover control, and data attribute syncing you need.

First, Fix the Core Issues in Your Original Code #

• Duplicate IDs: You can't have multiple elements with the same id (like id="box" on all small boxes) — IDs must be unique. We'll replace this with a class="box" instead.
• JavaScript Syntax/Logic Gaps: We'll rewrite the click handler to properly cycle states and sync data attributes without errors.

Complete Working Code #

HTML #

<div class="grid-container">
  <!-- Big letter box -->
  <div class="letter-box">A</div>
  <!-- 52 small boxes (repeat this snippet to reach 50 more boxes) -->
  <div class="box" data-state="defaultWhite"></div>
  <div class="box" data-state="defaultWhite"></div>
  <!-- ... add remaining boxes here ... -->
</div>

CSS #

.grid-container {
  display: grid;
  grid-template-columns: repeat(13, 1fr); /* Adjust column count to fit your layout */
  gap: 5px;
  padding: 10px;
}

.letter-box {
  grid-column: span 2; /* Adjust span to make the letter box larger */
  background-color: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  border: 1px solid #ccc;
}

.box {
  aspect-ratio: 1/1;
  background-color: white;
  border: 1px solid #ccc;
  transition: background-color 0.2s ease;
}

/* Only enable hover effect when box is in default white state */
.box[data-state="defaultWhite"]:hover {
  background-color: #eee;
}

/* State-specific background colors */
.box[data-state="green"] {
  background-color: #4CAF50;
}

.box[data-state="red"] {
  background-color: #F44336;
}

JavaScript #

// Grab all small box elements
const boxes = document.querySelectorAll('.box');

// Attach click handler to each box
boxes.forEach(box => {
  box.addEventListener('click', () => {
    const currentState = box.dataset.state;
    
    // Cycle through states: defaultWhite → green → red → defaultWhite
    switch(currentState) {
      case 'defaultWhite':
        box.dataset.state = 'green';
        break;
      case 'green':
        box.dataset.state = 'red';
        break;
      case 'red':
        box.dataset.state = 'defaultWhite';
        break;
    }
  });
});

Key Explanations #

• Data Attribute State Sync: We use data-state to track each box's status directly in the DOM. This keeps state visible and lets CSS handle styling automatically based on the current state.
• Conditional Hover Control: The hover effect only activates when data-state="defaultWhite" — no extra JS needed to disable it for green/red states; CSS handles this natively.
• Clean State Cycling: The switch statement makes the sequential state change logic easy to read and modify if you ever want to add more states later.
• Separation of Concerns: We avoid manipulating styles directly in JS. Instead, CSS uses attribute selectors to apply colors, making the code easier to maintain and update.

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