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在hover和css上顯示和隱藏span標簽以處理錨標簽的寬度。

$('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

在resize事件上，您永遠不會從窗口大小時刪除上一個事件處理程序。 你可以使用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);
    });
});

Answer 2

.hover()等.click()等功能，是與jQuery添加劑。

每次調整窗口時，都會在懸停時綁定一個附加功能。

我的意思是，如果窗口的大小調整為200像素，則將該函數綁定200次，實際上它將在懸停時執行200次。

擴展窗口時也是如此：懸停功能將繼續保持聯系。 因此，在懸停時，將執行200個“小屏幕”功能，並將執行200個“大屏幕”功能。 這是一個糟糕的設計。

至少，你必須在應用新的之前取消綁定hover（）：

$('a.btn').unbind('mouseover mouseout').hover(

Answer 3

您的代碼無法運行，因為您將其放在$（window）.resize中。 它僅在屏幕調整大小時運行，但永遠不會懸停。