資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何切換使用map()渲染的按鈕之間的CSS類？
在構建web應用程式時，開發者經常需要建立具有動態樣式的按鈕。最有效的方法之一是在JavaScript中使用map()方法。此方法允許您根據資料渲染具有不同樣式的多個按鈕。但是，有時您可能希望根據使用者互動或其他事件動態更改按鈕的CSS類。在本文中，我們將討論兩種不同的方法來切換使用JavaScript中map()渲染的按鈕之間的CSS類。
演算法
切換使用map()渲染的按鈕之間的CSS類的演算法包括以下步驟：
建立一個包含每個按鈕資料的物件陣列
使用map()方法渲染按鈕並分配預設CSS類
向每個按鈕新增事件監聽器以監聽使用者互動
當用戶與按鈕互動時，使用classList屬性將其CSS類切換到所需的類
方法一：使用狀態和三元運算子
在這種方法中，我們使用useState hook建立一個名為“activeButton”的狀態變數，該變數將儲存當前活動按鈕的ID。然後，我們將此狀態變數作為三元運算子傳遞給按鈕的className屬性。如果按鈕的ID與activeButton狀態匹配，則新增“active”CSS類，否則保持為空。
當用戶點選按鈕時，handleButtonClick函式將activeButton狀態更新為被點選按鈕的ID，從而導致元件重新渲染並切換相應按鈕的CSS類。
import React, { useState } from "react";
const buttonsData = [
{ id: 1, label: "Button 1" },
{ id: 2, label: "Button 2" },
{ id: 3, label: "Button 3" },
];
const App = () => {
const [activeButton, setActiveButton] = useState(null);
const handleButtonClick = (id) => {
setActiveButton(id);
};
return (
<div>
{
buttonsData.map(({ id, label }) => (
<button
key={id}
onClick={() => handleButtonClick(id)}
className={activeButton === id ? "active" : ""}
>
{label}
</button>
))
}
</div>
);
};
export default App;
方法二：使用基於類的元件和條件渲染
在這種方法中，我們使用基於類的元件而不是函式元件。我們在類中定義狀態和事件處理程式。其餘程式碼與前一種方法幾乎相同。
import React, { Component } from "react";
const buttonsData = [
{ id: 1, label: "Button 1" },
{ id: 2, label: "Button 2" },
{ id: 3, label: "Button 3" },
];
class App extends Component {
state = {
activeButton: null,
};
handleButtonClick = (id) => {
this.setState({ activeButton: id });
};
render() {
const { activeButton } = this.state;
return (
<div>
{
buttonsData.map(({ id, label }) => (
<button
key={id}
onClick={() => this.handleButtonClick(id)}
className={activeButton === id ? "active" : ""}
>
{label}
</button>
))
}
</div>
);
}
}
export default App;
示例1：透過點選切換CSS類
在這個例子中，我們將演示當用戶點選按鈕時切換按鈕的CSS類。
<!DOCTYPE html>
<html>
<head>
<style>
.default {
background-color: gray;
color: white;
}
.active {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div id="buttons-container"></div>
<script>
const buttonsData = [
{ id: 1, label: "Button 1" },
{ id: 2, label: "Button 2" },
{ id: 3, label: "Button 3" },
];
const buttonsContainer = document.getElementById("buttons-container");
buttonsData.forEach(({ id, label }) => {
const button = document.createElement("button");
button.textContent = label;
button.className = "default";
button.addEventListener("click", () => {
const activeButton = buttonsContainer.querySelector(".active");
if (activeButton) {
activeButton.classList.remove("active");
}
button.classList.add("active");
});
buttonsContainer.appendChild(button);
});
</script>
</body>
</html>
在這個例子中，我們建立了一個簡單的HTML頁面，其中包含按鈕的容器以及預設和活動類的CSS樣式。然後，我們使用forEach()方法迭代buttonsData陣列，併為每個專案建立一個按鈕元素。我們為每個按鈕設定預設CSS類，並新增一個事件監聽器來監聽點選事件。
當用戶點選一個按鈕時，我們首先找到當前活動的按鈕（如果有），並從中刪除active類。然後，我們將active類新增到被點選的按鈕。
示例2：使用鍵盤導航切換CSS類
在這個例子中，我們將演示當用戶使用鍵盤導航到按鈕時切換按鈕的CSS類。
<!DOCTYPE html>
<html>
<head>
<style>
.default {
background-color: gray;
color: white;
}
.active {
background-color: red;
color: white;
}
</style>
</head>
<body>
<div id="buttons-container"></div>
<script>
const buttonsData = [
{ id: 1, label: "Button 1" },
{ id: 2, label: "Button 2" },
{ id: 3, label: "Button 3" },
];
const buttonsContainer = document.getElementById("buttons-container");
buttonsData.forEach(({ id, label }) => {
const button = document.createElement("button");
button.textContent = label;
button.className = "default";
button.addEventListener("focus", () => {
const activeButton = buttonsContainer.querySelector(".active");
if (activeButton) {
activeButton.classList.remove("active");
}
button.classList.add("active");
});
buttonsContainer.appendChild(button);
});
</script>
</body>
</html>
在這個例子中，我們使用與前一個例子相同的HTML和CSS樣式。我們沒有新增點選事件監聽器，而是向每個按鈕添加了一個焦點事件監聽器。當用戶使用鍵盤（例如，按Tab鍵）導航到按鈕時，會觸發此事件監聽器。
當觸發焦點事件時，我們遵循與前一個示例相同的邏輯來切換按鈕的CSS類。
結論
在本文中，我們討論了兩種不同的方法來切換使用JavaScript中map()渲染的按鈕之間的CSS類。我們首先解釋了完成此任務的演算法，然後提供了兩種不同的方法，並附帶程式碼和解釋。第一種方法涉及使用React中的useState hook建立一個狀態變數，該變數儲存當前活動按鈕的ID。然後，我們使用三元運算子根據activeButton狀態切換按鈕的CSS類。第二種方法涉及使用基於類的元件和條件渲染來實現相同的結果。我們還提供了兩個可執行的示例，以演示如何透過使用者互動和鍵盤導航切換按鈕的CSS類。透過遵循這些方法，您可以建立具有不同樣式的動態按鈕，並根據使用者互動或其他事件輕鬆地在它們之間切換。
232 次瀏覽
