javascript - 如何在不使用多种方法的情况下简化切换按钮代码
问题描述
我想知道是否有办法简化这段代码。
HTML
<div id="category-tabs">
<a href="#" onclick="return false;"><i class="fas fa-toggle-on"></i></a>
</div>
JS
const toggleBtn = document.querySelector('#category-tabs');
const toggleBtnI = document.querySelector('i');
const replFunction = () => {
toggleBtnI.classList.contains('fa-toggle-on')
? toggleBtnI.classList.replace('fa-toggle-on', 'fa-toggle-off')
: toggleBtnI.classList.replace('fa-toggle-off', 'fa-toggle-on');
toggleBtn.classList.toggle('active');
};
toggleBtn.addEventListener('click', replFunction);
解决方案
如果您想在 Vanilla JS 中执行此操作。那么你的代码是正确的,你只能删除变量和函数声明来缩短你的代码。
document.querySelector('#category-tabs').addEventListener('click', () => {
document.querySelector('i').classList.contains('fa-toggle-on')
? document.querySelector('i').classList.replace('fa-toggle-on', 'fa-toggle-off')
: document.querySelector('i').classList.replace('fa-toggle-off', 'fa-toggle-on');
document.querySelector('#category-tabs').classList.toggle('active');
});
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div id="category-tabs">
<a href="javascript:void"><i class="fa fa-toggle-on"></i></a>
</div>
推荐阅读
- datetime - 在 golang 中解析日期
- python - 一种在 Python 中向 contextvars 添加类型的方法
- matlab - BFGS 准牛顿算法不计算步长
- typo3 - TYPO3 异常 #1294587217:从 6.2.6 升级到 7.6.20 时
- javascript - 打开新标签或窗口,而不是弹出角度 2
- angular - 角度库安装对等依赖问题
- python - 如何找到一个独特的 HTML 元素?
- java - 任务':app:kaptDemoProductionDebugKotlin'的错误执行失败。?
- sql - 如何对零进行此操作?
- java - jar 文件中的 Geckodriver