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

使用querySelector选择元素
addEventListner绑定事件
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

将jQuery切换代码转换为JavaScript

1 个答案: