如何在不同的范围内重用变量？

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/>