javascript - 将 jQuery 切换代码转换为 JavaScript

Question

我正在尝试翻译一些 jQuery 来切换按钮/响应式菜单，但无法让我的版本正常工作。我知道大多数人都对 jQuery 非常着迷，但我们不允许在类项目中使用它，所以我真的需要了解我的代码不起作用的方式/原因。

jQuery 代码:

var content = $('main');
$('button').click(function () {
    ($('i').hasClass('fa-bars')) ?
    $('i').removeClass('fa-bars').addClass('fa-times'):
        $('i').removeClass('fa-times').addClass('fa-bars');
    $('ul').toggleClass('nav-visible');
    content.toggleClass('active');
});

JavaScript 代码:

var content = document.querySelector('main');
var button = document.querySelector('button');

function clickListener(button) {
    "use strict";
    button.addEventListener('click', function () {
        var i = document.querySelector('i');
        if (i.contains('fa fa-bars') === true) {
            i.remove('fa fa-bars');
            i.add('fa fa-times');
        } else {
            i.remove('fa fa-times');
            i.add('fa fa-bars');
        }
        var ul = document.querySelector('ul');
        ul.toggleClass('nav-visible');
        content.toggleClass('active');
    });
}

但是，JavaScript 中的 jQuery 等效代码无法正常工作。

Answer 1

1. 使用querySelector选择元素
2. addEventListner 绑定(bind)事件
3. classList 用于添加、删除、拥有和切换类的 API。

jQuery 代码:

var content = $('main');
$('button').click(function () {
    ($('i').hasClass('fa-bars')) ? $('i').removeClass('fa-bars').addClass('fa-times'):
         $('i').removeClass('fa-times').addClass('fa-bars');
    // This is same as
    // $('i').toggleClass('fa-times fa-bars');


    $('ul').toggleClass('nav-visible');
    content.toggleClass('active');
});

等效 JavaScript 代码:

var content = document.querySelector('main'); // Same as $('main')

// bind click event on first <button> element
document.querySelector('button').addEventListener('click', function() {

    // Toggle classes
    document.querySelector('i').classList.toggle('fa-bars');
    document.querySelector('i').classList.toggle('fa-times');

    document.querySelector('ul').classList.toggle('nav-visible');
    content.classList.toggle('active');
}, false);

Demo