如何在不同的范圍內重用變量？

Question

我試圖找出如何在函數中重用變量，現在我必須將它放在每個范圍內才能工作。

假設我有一個jQuery事件處理程序：

$('.button').on('click', function() {
    var btn = $(this).data('button');
    $(this).addClass(btn+'-activate');
}).on('mouseup', function() {
     var btn = $(this).data('button');
     $(this).removeClass( btn+'-activate');
}).on('mouseleave', function() {
     var btn = $(this).data('button');
     $(this).removeClass( btn+'-activate');
}

如何重用變量'btn'？ 當我把它放在父范圍內時，它不再識別$（this）

Answer 1

其他答案中有一些冗余。 以下是我通常處理相關事件並具有常見變量的方法：

$('.button').on('click mouseup mouseleave', function(event) {
    var btn = $(this).data('button');

    switch(event.type) {
        case 'click': {
            $(this).addClass(btn+'-activate');
            break;
        }

        case 'mouseup':
        case 'mouseout':
        case 'mouseleave': {
            $(this).removeClass(btn+'-activate');
            break;
        }
    }
});

偵聽多個事件並使用switch語句來確定調用了哪個事件。

Answer 2

您可以迭代按鈕，為每個按鈕設置變量，然后在事件處理程序中使用變量。

$('.button').each(function() {
    var btn = $(this).data('button');
    $(this).on('click', function() {
        $(this).addClass(btn+'-activate');
    }).on('mouseup mouseleave', function() {
        $(this).removeClass( btn+'-activate');
    });
});

但是，這當然與您的代碼完全不同。 這里我們在處理程序附加時設置btn的值，而在問題的代碼中，在調用處理程序時設置btn 。 因此，如果.data('button')值不打算改變，這只是一個有效的替代方案。

Answer 3

使用變量沒有特別的優勢。 您可以將函數傳遞給.removeClass()和.addClass()從而無需使用變量：

$(function() {
    $('.button').on('click', function() {
        $(this).addClass( function() {
            return $(this).data('button') + '-activate';
        });
    }).on('mouseup mouseleave', function() {
         $(this).removeClass( function() {
             return $(this).data('button') + '-activate';
         });
    });
});

  $(function() { $('.button').on('click', function() { $(this).addClass( function() { return $(this).data('button') + '-activate'; }); }).on('mouseup mouseleave', function() { $(this).removeClass( function() { return $(this).data('button') + '-activate'; }); }); }); 

 .one-activate { background-color:black; color:white; } .two-activate { background-color:black; color:yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button class="button" data-button="one">Man</button><br/> <button class="button" data-button="two">Woman</button><br/> 

獎金 ：

正如您所看到的，傳遞給.removeClass()和.addClass()的函數完全相同。 我們可以編寫一個jQuery自定義方法並使用它代替函數，如下所示：

$(function() {
    $('.button').on('click', function() {
        $(this).addClass( $(this).btnActivate() );
    })
    .on('mouseup mouseleave', function() {
         $(this).removeClass( $(this).btnActivate() );
    });
});

$.fn.btnActivate = function() {
    return this.data('button') + '-activate';
};

  $(function() { $('.button').on('click', function() { $(this).addClass( $(this).btnActivate() ); }) .on('mouseup mouseleave', function() { $(this).removeClass( $(this).btnActivate() ); }); }); $.fn.btnActivate = function() { return this.data('button') + '-activate'; }; 

 .one-activate { background-color:black; color:white; } .two-activate { background-color:black; color:yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button class="button" data-button="one">Man</button><br/><br/> <button class="button" data-button="two">Woman</button><br/>