有沒有更有效的方法來編寫這個涉及 FontAwesome 圖標的 function？
[英]Is there a more efficient way to write this function involving FontAwesome icons?
問題描述
我有這個小 function，它通過單擊按鈕將 FontAwesome 圖標從“人字形向下”更改為“人字形向下”。 我覺得有一種更有效的方法可以在下面編寫這個 function：
const moveChevron = () => {
if (chevron.classList.contains("fa-chevron-down")) {
chevron.classList.remove("fa-chevron-down");
chevron.classList.add("fa-chevron-up");
} else if (chevron.classList.contains("fa-chevron-up")) {
chevron.classList.remove("fa-chevron-up");
chevron.classList.add("fa-chevron-down");
}
};
searchCheck.addEventListener('click', moveChevron);
有沒有辦法簡化這個？
4 個解決方案
解決方案1
1 2020-08-18 19:01:39
Element.classList.toggle可以像這樣縮短 function：
const moveChevron = () => {
chevron.classList.toggle("fa-chevron-up");
chevron.classList.toggle("fa-chevron-down");
};
解決方案2
1 已采納 2020-08-18 19:02:17
您可以切換 class（如果它處於“關閉”狀態，則將其“打開”state 並向后）：
const moveChevron = () => {
chevron.classList.toggle("fa-chevron-down");
chevron.classList.toggle("fa-chevron-up");
};
當然，在這樣做之前，您的元素必須默認設置一個或另一個 class：
<input type="check" class="fa-chevron-down" id="my-check-box />
解決方案3
0
class 列表有一個可以以幾種不同方式應用的toggle方法。 孤立地，你可以這樣做，切換兩個類：
const moveChevron = () => {
chevron.classList.toggle("fa-chevron-down");
chevron.classList.toggle("fa-chevron-up");
};
但是，除了切換 class 之外，您似乎還想基於這個 state 實現一些行為。在這種情況下，您必須選擇要保留 state 的位置。也許在類中，利用返回值toggle （boolean 根據切換后是否存在 class）？ 也許在一個變量中：
// name this according to what the chevron means
let isFoo = true;
const moveChevron = () => {
isFoo = !isFoo;
// select !isFoo or isFoo for these for best readability
chevron.classList.toggle("fa-chevron-down", !isFoo);
chevron.classList.toggle("fa-chevron-up", isFoo);
};
或者也許最重要的是，在瀏覽器知道如何使用的控件中。 一個可切換的控件是復選框，您很可能應該在某處使用一個。 也許searchCheck已經是一個復選框——它的名字有點暗示了這一點。 在這種情況下，正確的事件是“change”並且 state 在它的checked屬性中，不要單獨跟蹤它：
const moveChevron = () => {
var isFoo = searchCheck.checked;
chevron.classList.toggle("fa-chevron-down", !isFoo);
chevron.classList.toggle("fa-chevron-up", isFoo);
};
您甚至可以使用:checked在 CSS 中實現上述內容，從而完全避免 JavaScript。
解決方案4
0 2020-08-18 19:08:19
您可以使用切換方法代替單獨的添加/刪除方法。
let chevron = document.getElementById("chevron"); let searchCheck = document.getElementById("searchCheck"); const moveChevron = () => { if (chevron.classList.contains("fa-chevron-down")) { chevron.classList.toggle("fa-chevron-up"); } else if (chevron.classList.contains("fa-chevron-up")) { chevron.classList.toggle("fa-chevron-down"); } }; searchCheck.addEventListener('click', moveChevron);
#searchCheck { padding: 10px 20px; border: 0; background-color: #333; color: #fff; border-radius: 3px; cursor: pointer; } #chevron { padding: 8px; background-color: #f90; color: white; font-size: 20px; border-radius: 3px; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1:0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <link href=" https.//use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet"> </head> <body> <button id="searchCheck">Change Icon</button> <span id="chevron" class="fas fa-chevron-down"></span> </body> </html>
有沒有更有效的方法來編寫這個函數？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.