На этом шаге мы рассмотрим использование указателя this.
Наш переключатель действует вполне корректно, но мы не предоставили пользователю обратную связь, чтобы он мог видеть, какая кнопка в настоящий момент является активной. Для реализации такой обратной связи мы применим класс selected к кнопке, на которой был произведен щелчок, и удалим его из всех остальных кнопок. Класс selected просто обеспечивает вывод надписи на кнопке жирным шрифтом:
.selected {
font-weight: bold;
}
Мы могли бы добавить этот класс тем же способом, что и выше, ссылаясь на каждую кнопку по ее идентификатору и применяя или удаляя классы по мере необходимости, но мы рассмотрим более элегантное и масштабируемое решение, основанное на использовании контекста обработчика события.
Когда вызывается обработчик некоторого события, в виде ключевого слова this ему передается ссылка на элемент DOM, в котором возникло это событие. Мы уже отмечали, что фабричная функция $() может принимать элемент DOM в виде аргумента - этим и обусловлена описанная особенность. Вызывая метод $(this) внутри обработчика события, мы создаем объект jQuery, соответствующий элементу, и получаем возможность оперировать им, как если бы он был получен с помощью селектора CSS.
Таким образом, мы можем записать вызов:
$(this).addClass('selected');
Поместив эту строку в каждый из трех обработчиков, мы сможем добавлять класс к кнопке по событию щелчка на ней. Для удаления класса у других кнопок можно воспользоваться механизмом неявных итераций jQuery и записать:
$('#switcher .button').removeClass('selected');
Эта строка удаляет класс у всех остальных кнопок, присутствующих в странице переключателя стилей. Разместив указанные строки в требуемом порядке, мы получим следующий программный код:
$(document).ready(function() {
$('#switcher-default').bind('click', function() {
$('body').removeClass('narrow');
$('body').removeClass('large');
$('#switcher .button').removeClass('selected');
$(this).addClass('selected');
});
$('#switcher-narrow').bind('click', function() {
$('body').addClass('narrow');
$('body').removeClass('large');
$('#switcher .button').removeClass('selected');
$(this).addClass('selected');
});
$('#switcher-large').bind('click', function() {
$('body').removeClass('narrow');
$('body').addClass('large');
$('#switcher .button').removeClass('selected');
$(this).addClass('selected');
});
});
Теперь переключатель стилей предоставляет подобающую обратную связь, как показано в окне ниже.
Рис.1. Кнопка, на которой был выполнен щелчок, выделяется жирным шрифтом
Текст этого примера можно взять здесь.Обобщение инструкций за счет использования контекста обработчика события позволяет нам добиться еще большей эффективности. Мы можем оформить процедуру выделения кнопки в виде отдельного обработчика, как показано ниже, поскольку она остается неизменной для всех трех кнопок:
$(document).ready(function() {
$('#switcher-default').bind('click', function() {
$('body').removeClass('narrow').removeClass('large');
});
$('#switcher-narrow').bind('click', function() {
$('body').addClass('narrow').removeClass('large');
});
$('#switcher-large').bind('click', function() {
$('body').removeClass('narrow').addClass('large');
});
$('#switcher .button').bind('click', function() {
$('#switcher .button').removeClass('selected');
$(this).addClass('selected');
});
});
Эта оптимизация использует преимущества трех особенностей библиотеки jQuery. Во-первых, неявная итерация позволяет присоединить обработчики события click ко всем трем кнопкам с помощью одного вызова метода .bind(). Во-вторых, очереди обработчиков позволяют нам назначить вторую функцию для обработки того же события click без перезаписи ссылки на первую функцию. Наконец, мы можем использовать возможность составления цепочек методов для реализации добавления и удаления классов в одной строке.
На следующем шаге мы рассмотрим дальнейшее уплотнение кода.
