Глобальные переменные, которые можно использовать в нескольких функциях jQuery

Question

Можете ли вы содержать переменные, которые можно использовать в нескольких функциях в jQuery, например:

var self = $(this);
var box = self.parents('.box');

$('#title').click(function()
{
    self.css('background', 'red');
    box.slideDown('slow');
}).dblclick(function()
{
    self.css('background', 'green');
    box.slideUp('slow');
});

Так что self и box могут использоваться в этих функциях событий, поэтому мне не нужно продолжать делать это:

$('#title').click(function()
{
    var self = $(this);
    var box = self.parents('.box');

    self.css('background', 'red');
}).dblclick(function()
{
    var self = $(this);
    var box = self.parents('.box');

    self.css('background', 'green');
});

Но вопрос в том, возможно ли это, если да, как вы можете это сделать?

Answer 1

Хотя к глобальным переменным можно получить доступ, они не будут содержать то, что вам нужно, потому что this - это специальное ключевое слово, значение которого отличается в зависимости от того, где оно размещено. В вашем примере он оценивается один раз, в глобальной области, а не в каждой функции.

Короче говоря, глобальные переменные, которые вы описали, не очень хорошая идея. Вместо этого вы можете связать свой код так, что переменную self вообще не нужно создавать:

$('#title').click(function()
{
    $(this).css('background', 'red').parents('box').slideDown('slow');
}).dblclick(function()
{
    $(this).css('background', 'green').parents('box').slideUp('slow');
});

Answer 2

Вы не можете делать то, что пытаетесь сделать, но вы могли бы сделать что-то вроде этого:

function getBoxes(selector) {
    return $(selector).parents('.box');
}

$('#title').click(function()
{
    getBoxes(this).css('background', 'red');
}).dblclick(function()
{
    getBoxes(this).css('background', 'green');
});

Вы могли бы, как упоминает @ box9, просто объединить ваши вызовы в цепочку.Вот что это делает по существу.Вы также можете изменить указанную выше функцию, чтобы справиться со сменой цвета, особенно если это единственное, для чего вы используете это.

function colorBoxes(selector, color) {
    $(selector).parents('.box').css('background', color);
}

$('#title').click(function()
{
    colorBoxes(this, 'red');
}).dblclick(function()
{
    colorBoxes(this, 'green');
});

Answer 3

Возможно:

var titleEl = $('#title');
var boxEl = titleEl.parents('.box');

titleEl.click(function()
{
    titleEl.css('background', 'red');
    boxEl.slideDown('slow');
}).dblclick(function()
{
    titleEl.css('background', 'green');
    boxEl.slideUp('slow');
});

хотя это плохая идея IMO, потому что глобальные переменные, как правило, плохая идея, особенно когда они используются, потому что это проще.

Что еще более важно, если ваш $ ('# title') не был идентификатором и, следовательно, единственным элементом, но, возможно, классом $ ('. Title') и многими элементами, код не будет работать так, как сейчас (потому что каждая ссылка на titleEl.css () изменит ВСЕ экземпляры класса). который показывает, что модель глобальной переменной хрупкая.

он также не предназначен для динамически добавляемых элементов DOM, поскольку назначение происходит только один раз.