jQuery转换为普通JavaScript不能正常工作

Question

我在jQuery中有以下代码：

    $('body').on('click', '#gtco-offcanvas ul a:not([class="external"]), .main-nav a:not([class="external"])', function (event) {

        var section = $(this).data('nav-section');

        if ($('[data-section="' + section + '"]').length) {
            $('html, body').animate({
                scrollTop: $('[data-section="' + section + '"]').offset().top - 55
            }, 500, 'easeInOutExpo');
        }

我需要用纯香草JS重写它。 我已经尝试过这样做，但是我只是遇到了很多错误，而且不知道如何纠正它们。

这是我的代码版本：

    document.body.addEventListener('click', function (e) {
        if (e.target.closest('body #gtco-offcanvas ul a:not([class="external"]), .main-nav a:not([class="external"])')) {

            var section = document.querySelector('data').dataset('nav-section');

            if (document.querySelectorAll('[data-section="' + section + '"]').length) {
                document.querySelectorAll('html, body').animate({
                    scrollTop: document.querySelectorAll('[data-section="' + section + '"]').offset().top - 55
                }, 500, 'easeInOutExpo');
            }
        };

输出为：

Uncaught TypeError: Cannot read property 'dataset' of null

如果我尝试让jQuery中的这一行测试代码的其余部分是否正常工作，我不会出错，但是它也不会做任何事情...

Answer 1

假设您的html元素具有数据属性data-nav-section=""那么您将要查找的是：

var section = e.target.dataset.navSection;

e.target将是$(this)的等价物， dataset不是一个函数，而是在属性名称中使用破折号时必须使用驼峰命名约定的属性

Answer 2

如果接收元素是委托的元素，则可以使用matches方法而不进行closest的测试：

if (e.target.matches('#gtco-offcanvas ul a:not([class="external"]), .main-nav a:not([class="external"])')) {    
    var section = e.target.dataset['navSection'];
    // ...
}