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');
}

如何重复使用变量＆＃39; btn＆＃39;？当我把它放在父范围内时，它不再认识$（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';
         });
    });
});

＆＃13;

    $(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';
             });
        });
    });

＆＃13;

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

＆＃13;

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

＆＃13;

<强>奖金：

正如您所看到的，传递给.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';
};

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: