Как я могу повторно использовать переменную в другой области?

Я пытаюсь понять, как я могу повторно использовать переменную внутри функции, сейчас я должен поместить ее в каждую область, чтобы она работала.

Скажем, у меня есть обработчик события 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)

Ответ 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, чтобы определить, какое событие было вызвано.

Ответ 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') не предназначено для изменения.

Ответ 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/>