Question

我正在尝试编写一个可重复使用的代码，用于通过使用数据属性将滚动到点击事件附加到各种DOM节点。这是我到目前为止所做的：

HTML

<li class="scroll-to-anchor" data-dest='top'></li>

<div id='top'></div>

JS

if ($('.scroll-to-anchor').length) {
    $('.scroll-to-anchor').each(function () {
        var instance = $(this);
        if ($(this).attr('data-dest')) {
            var destination = $(this).data('dest');
            if ($('#' + destination).length) {
                instance.click(function () {
                    alert('click');
                    // Scroll to destination
                })
            } else {
                throw 'Not a valid scroll-to anchor'
            }
        } else {
            throw 'No data attribute present'
        }
    });
}

如您所见，该功能应该是：

检查是否存在任何.scroll-to-anchor节点
如果他们这样做，请通过每个
检查.scroll-to-anchor是否具有data-dest属性
如果是，请检查该属性是否与DOM节点相对应
如果是，请附加点击事件

一切正常，但点击事件没有附加。我觉得这与范围有关，但我无法弄清楚......

Answer 1

throw可能会破坏你的循环。您可能希望改为使用console.error()。

$(".scroll-to-anchor").each(function() {
    var instance = $(this),
        destination = instance.data('dest'),
        element = $("#" + destination);

    if (destination) {
        if (element) {
            instance.on("click", function() {
                console.info("Anchor clicked");
                $('html, body').animate({
                    scrollTop: element.offset().top
                }, 500);
            });
        } else {
            console.error("Destination not found");
        }
    } else {
        console.error("No destination specified");
    }
});

Answer 2

检查此JsFiddle

<强> HTML

<a id="top"></a>
<div class="scroll-to-anchor" data-dest="top">sdlkjfs</div>

<强> JS

$('.scroll-to-anchor').each(function () {
    var instance = $(this);
    if (instance.data('dest')) {
        var destination = instance.data('dest');
        if ($('#' + destination).length) {
            instance.click(function () {
                alert('click');
                // Scroll to destination
            })
        } else {
            throw 'Not a valid scroll-to anchor'
        }
    } else {
        throw 'No data attribute present'
    }
});

jQuery点击功能未正确附加

2 个答案: