javascript - 如果当前选择了某些内容，则阻止多个功能

Question

我有一个导航菜单，在悬停时(使用hoverIntent插件和tweenmax进行动画)会用相关的背景图像替换div。我这一切都工作正常，但我困惑的是如何防止在当前选定的元素上重复该操作。因此，例如，如果您将鼠标悬停在第一个上，然后将鼠标悬停在其上，我不希望在您再次将鼠标悬停在该上时重复该操作，因为它已被选中。附件是我的 fiddle 的链接http://jsfiddle.net/olichalmers/5csofnhz/1/

var homeNav = function () {
    var tgt = $(this);

    $("#homeImageNav a ").hoverIntent({
        over: homeNavOver,
        out: homeNavOff,
        interval: 0
    });

    function homeNavOver() {

        var tgt = $(this);
        var bgHold = $("#bgHolder");
        var bg = tgt.attr('data-bg');

        if (!tgt.hasClass('current')) {
            TweenMax.set($("#bgHolder"), {
                opacity: 0,
                background: bg,
                scale: 1.1
            });
            TweenMax.to(bgHold, 1.5, {
                opacity: 1,
                scale: 1,
            });
        }
        //tgt.addClass('current');
    }

    function homeNavOff() {
        //if (tgt.hasClass('current')) {
        //tgt.removeClass('current');
        //}
    }
};

这是 homeNav 功能。

Answer 1

您只需要在您的函数 - homeNavOff 中进行如下更改:

function homeNavOff() {
    $('#homeImageNav a').removeClass('current');
    $(this).addClass('current');
}

查看它的实际操作fiddle