Question

JQuery 到 vanilla JavaScript 的转换不起作用

2019-08-15

189

javascript jquery

我在 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'];
    // ...
}