javascript - jQuery - 即使不满足条件也运行代码

Question

这里的事情是这样的(说来话长，但我有道理)

我有一个带有如下按钮的菜单:

*******
***B***
*******

悬停时展开

*************
***Button****
*************

现在，当屏幕用于移动设备时，不再有六边形，它们像普通按钮一样堆叠起来，显示完整的文本，而不必悬停以阅读。

我的标记如下:

<a href="#" class="btn">S<span class="comptxt">ervicios</span></a>
<a href="#" class="btn">C<span class="comptxt">ontacto</span></a>
<a href="#" class="btn">F<span class="comptxt">aq</span></a>
<a href="#" class="btn">B<span class="comptxt">log</span></a>

我正在使用 jQuery 在悬停时显示和隐藏 span 标签，并使用 css 来处理 anchor 标签的宽度。

$('a.btn').hover(function() {
                $(this).children('span').fadeIn(500);
                $('img').css('opacity', 0.5);
            }, function() {
                $(this).children('span').fadeOut(200);
                $('img').css('opacity', 1);
            });

所以悬停时淡入淡出而不悬停。但是我把这个 javascript 放在一个 IF 条件上，如果屏幕调整到移动设备(我使用 500px 及以下作为移动设备)这个代码不应该运行，这里是 if 条件:

$(window).resize(function() {
    if ($(window).width() < '501') {
        $('a.btn').hover(function() {
                $(this).children('span');
                $('img').css('opacity', 0.5);
            }, function() {
                $(this).children('span');
                $('img').css('opacity', 1);
            });
    };
    if ($(window).width() > '500') {
            $('a.btn').hover(function() {
                console.log($(window).width());
                $(this).children('span').fadeIn(500);
                $('img').css('opacity', 0.5);
            }, function() {
                //this part of the code runs even if the window is below 500
                $(this).children('span').fadeOut(200);
                $('img').css('opacity', 1);
            });

    };
});

条件不满足但代码仍在运行，这让我很害怕。这个问题是，当按钮正常并且您在调整大小后将鼠标悬停在它们上方时，文本会淡出其他事情:当您加载页面并且屏幕低于 500 时，它会正常工作，不会淡出。当您将大小调整到 500 以上并重新调整到 500 以下时，就会出现问题，然后淡出再次发生。

Answer 1

在调整大小事件中，当窗口处于较大尺寸时，您永远不会删除先前的事件处理程序。您可以使用 off() 实现此目的:

$(window).resize(function() {
    if ($(window).width() < '501') {
        $('a.btn').off('hover').hover(function() {
            // rest of your code...
        });
    };
    if ($(window).width() > '500') {
        $('a.btn').off('hover').hover(function() {
            // rest of your code...
        });
    };
});

更好的解决方案可能是在 hover 处理程序本身中检查窗口的大小，因为为调整窗口大小的每个像素分离/附加事件最终会非常慢.试试这个:

$(function() {
    $('a.btn').hover(function() {
        var opacity = $(window).width() < 501 ? 0.5 : 1;
        $('img').css('opacity', opacity);
    }, function() {
        var opacity = $(window).width() < 501 ? 1 : 0.5;
        $('img').css('opacity', opacity);
    });
});