javascript - 如何在不使用多种方法的情况下简化切换按钮代码

Question

我想知道是否有一种方法可以简化这段代码。

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);

Answer 1

如果你想在 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>