有没有更有效的方法来编写这个涉及 FontAwesome 图标的 function？
[英]Is there a more efficient way to write this function involving FontAwesome icons?
问题描述
I have this little function that changes the FontAwesome icon on the click of a button from the "chevron down" to the "chevron down".
我有这个小 function，它通过单击按钮将 FontAwesome 图标从“人字形向下”更改为“人字形向下”。 I have a feeling that there's a much more efficient way to write this function below:我觉得有一种更有效的方法可以在下面编写这个 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);
Is there a way to streamline this?有没有办法简化这个？
4 个解决方案
解决方案1
1 2020-08-18 19:01:39
Element.classList.toggle can shorten the function like so: 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
You can toggle class (put it 'on' if it was in 'off' state and backwards):您可以切换 class（如果它处于“关闭”状态，则将其“打开”state 并向后）：
const moveChevron = () => {
chevron.classList.toggle("fa-chevron-down");
chevron.classList.toggle("fa-chevron-up");
};
Of course before doing that your element must have either one or another class set by default:当然，在这样做之前，您的元素必须默认设置一个或另一个 class：
<input type="check" class="fa-chevron-down" id="my-check-box />
解决方案3
0
The class list has a toggle method that can be applied in a few different ways. class 列表有一个可以以几种不同方式应用的toggle方法。 In isolation, you could do this, toggling both classes:孤立地，你可以这样做，切换两个类：
const moveChevron = () => {
chevron.classList.toggle("fa-chevron-down");
chevron.classList.toggle("fa-chevron-up");
};
But it seems likely that you'll want to implement some behaviour based on this state beyond just toggling a class. In that case, you have to choose where you want to keep the state. Maybe in the classes, making use of the return value of toggle (a boolean according to whether the class is present after the toggling)?但是，除了切换 class 之外，您似乎还想基于这个 state 实现一些行为。在这种情况下，您必须选择要保留 state 的位置。也许在类中，利用返回值toggle （boolean 根据切换后是否存在 class）？ Maybe in a variable:也许在一个变量中：
// 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);
};
Or maybe best of all, in a control the browser knows how to work with.或者也许最重要的是，在浏览器知道如何使用的控件中。 One control that's toggleable is a checkbox, and it's highly possible you should be using one somewhere.一个可切换的控件是复选框，您很可能应该在某处使用一个。 Maybe searchCheck is already a checkbox – its name sort of implies that.也许searchCheck已经是一个复选框——它的名字有点暗示了这一点。 In that case, the correct event is “change” and the state is in its checked property, don't keep track of it separately:在这种情况下，正确的事件是“change”并且 state 在它的checked属性中，不要单独跟踪它：
const moveChevron = () => {
var isFoo = searchCheck.checked;
chevron.classList.toggle("fa-chevron-down", !isFoo);
chevron.classList.toggle("fa-chevron-up", isFoo);
};
And it's possible you can even implement the above in CSS using :checked , avoiding JavaScript entirely.您甚至可以使用:checked在 CSS 中实现上述内容，从而完全避免 JavaScript。
解决方案4
0 2020-08-18 19:08:19
You can use toggle method in place of individual Add/Remove methods.您可以使用切换方法代替单独的添加/删除方法。
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.