На этом шаге мы рассмотрим программный код, реализующий функциональность примера из предыдущего шага.
Наш программный код начнется с определения обработчиков событий $(document).ready() и $('#switcher-large').click():
$(document).ready(function() { $('#switcher button').click(function() { }); });
Далее размер шрифта легко можно определить с помощью метода .css(): $('div.speech').css('fontSize'). Однако возвращаемое значение содержит в конце символы 'рх', поэтому, прежде чем использовать полученное значение в вычислениях, нам необходимо удалить эти символы. Кроме того, если объект jQuery планируется использовать многократно, предпочтительнее будет кэшировать селектор, сохранив полученный объект jQuery в переменной.
$(document).ready(function() { var $speech = $('div.speech'); $('#switcher button').click(function() { var num = parseFloat( $speech.css('fontSize'), 10 ); }); });
Теперь первая строка внутри $(document).ready() сохраняет объект jQuery с элементом <div class="speech"> в переменной. Обратите внимание на символ $ в имени переменной $speech. Так как JavaScript допускает использование символа $ в именах переменных, мы можем применять его в качестве напоминания, что переменная хранит объект jQuery.
Внутри обработчика .click() мы используем функцию parseFloat(), чтобы получить значение свойства fontSize в виде числа. Функция parseFloat() просматривает строку слева направо, пока не встретит первый нецифровой символ. Затем строка цифр преобразуется в вещественное (десятичное) число. Например, эта функция преобразует строку '12' в число 12. Кроме того, она удаляет все нецифровые символы в конце строки, благодаря чему строка '12рх' превращается в число 12. Если строка начинается с нецифрового символа, функция parseFloat() возвращает значение NaN (Not a Number - не число). Второй аргумент функции parseFloat() позволяет указать, что строка должна интерпретироваться не как восьмеричное или какое-либо другое число, а как десятичное.
Все, что осталось теперь сделать для увеличения размера шрифта на 40%, - это просто умножить число num на 1.4 и затем установить новый размер шрифта, присоединив к числу num символы 'рх':
$(document).ready(function() { var $speech = $('div.speech'); $('#switcher button').click(function() { var num = parseFloat( $speech.css('fontSize'), 10 ); num *= 1.4; $speech.css('fontSize', num + 'px'); }); });
Теперь, когда пользователь щелкнет на кнопке Увеличить, размер шрифта текста увеличится. Следующий щелчок на этой кнопке увеличит размер шрифта еще больше.
Чтобы в результате щелчка на кнопке Уменьшить размер шрифта уменьшался, мы будем уже не умножать, а делить текущее значение размера: num /= 1.4. По-прежнему лучше всего объединить обработчики .click() всех элементов <button>, находящихся внутри <div id="switcher">. Тогда после получения числового значения можно будет выполнить операцию умножения или деления в зависимости от значения атрибута ID кнопки, на которой был выполнен щелчок. Ниже показано, как теперь выглядит наш программный код:
$(document).ready(function() { var $speech = $('div.speech'); $('#switcher button').click(function() { var num = parseFloat( $speech.css('fontSize'), 10 ); if (this.id == 'switcher-large') { num *= 1.4; } else if (this.id == 'switcher-small') { num /= 1.4; } $speech.css('fontSize', num + 'px'); }); });
Ранее говорилось, что доступ к свойству id элемента DOM можно получить с помощью ключевого слова this, которое присутствует в инструкциях if и else if. В данном случае этот способ является более эффективным, чем создание объекта jQuery для простой проверки значения свойства.
Кроме всего прочего, не лишним было бы иметь возможность возвращать размер шрифта в его первоначальное значение. Чтобы дать пользователю такую возможность, мы можем просто сохранить размер шрифта в переменной сразу же, как только дерево DOM будет готово к работе с ним. После этого мы сможем задействовать это значение в обработчике щелчка на кнопке Обычный. Чтобы обработать данное событие, мы могли бы добавить еще одну инструкцию else if. Однако инструкция switch лучше подходит для таких случаев.
$(document).ready(function() { var $speech = $('div.speech'); var defaultSize = $speech.css('fontSize'); $('#switcher button').click(function() { var num = parseFloat( $speech.css('fontSize'), 10 ); switch (this.id) { case 'switcher-large': num *= 1.4; break; case 'switcher-small': num /= 1.4; break; default: num = parseFloat(defaultSize, 10); } $speech.css('fontSize', num + 'px'); }); });
Здесь мы точно так же проверяем значение this.id и в соответствии с ним изменяем размер шрифта, но если это значение не равно ни 'switcher-large', ни 'switcher-small', то устанавливается размер шрифта по умолчанию.
На следующем шаге мы рассмотрим простые эффекты скрытия и отображения.