Tarlyun blog

Иногда возникает потребность подсветить одинаковые объекты на странице. Причем желательно делать это динамически: при наведении курсора мышки или при выборе переключателя. Я долго искал готовое решение с использованием javascript, но так и не смог найти. Почитав документацию по JQuery, понял, что все не так и сложно.

Давайте четко опишем задачу:
— Есть HTML страница;
— На странице есть какие-то объекты, у одинаковых объектов — одинаковый css-класс;
— При наведении курсора на один из объектов — все объекты того же класса подсвечиваются;
— После того как курсор перемещается за пределы объекта, подсветка пропадает.

Для статьи я сделал 2 примера.
Пример 1. Подсвечиваем цветные квадратики

На странице есть таблица 10х10 с серыми клетками. Слева есть меню, позволяющее:
— заполнить таблицу случайно одним из десяти цветов (цвета определены как классы в css);
— вернуть таблицу к исходному состоянию (очистить);
— подсветить выбранный цвет (при наведении курсора на образец в мини-таблице).

Рассмотрим код.
Классы css, отвечающие за цвет раскраски (c0 — c9) и за цвет подсветки (hovered):

td.c0 {background: #CCCCCC;}
td.c1 {background: #3399FF;}
td.c2 {background: #6633FF;}
td.c3 {background: #66FF00;}
td.c4 {background: #990000;}
td.c5 {background: #FF9900;}
td.c6 {background: #FFFF00;}
td.c7 {background: #FF0000;}
td.c8 {background: #3333CC;}
td.c9 {background: #33CC33;}
td.hovered {background: #000;}

Случайное заполнение таблицы цветом:

$("#randomize").click(function () {
	$('#hover td').each(function(){
		var cl = 'c' + Math.floor(Math.random()*10);
		$(this).removeClass();
		$(this).addClass(cl);
	});
});

$("#randomize").click — определяет функцию, которая будет выполняться при клике на объекте с id=randomize (в данном случае — это кнопка).
function () {...} — позволяет создать анонимную функцию (тело функции есть, а названия — нет).
$('#hover td') — ищет все ячейки td, которые находятся внутри объекта с id=hover (в данном случае hover — это сама таблица 10х10, то есть будут найдены все ячейки нашей таблицы). В результате будет получена коллекция элементов, обойти которую можно с помощью метода each, выполняя указанную функцию.
Рассмотрим отдельно функцию-обработчик:
$(this).removeClass() — удаляет все css-классы с текущего объекта.
Math.floor(Math.random()*10) — выбирает случайное число в диапазоне от 0 до 9.
var cl = 'c' + Math.floor(Math.random()*10) — определяет переменную cl, которая будет содержать значение класса-цвета (c0, c1 и так далее, как описано в css)
$(this).addClass(cl) — устанавливает сгенерированное наименование класса для текущего объекта.

В результате все 100 ячеек таблицы получат один из 10 классов, изменив свой цвет.

Очистка таблицы. Для каждой ячейки таблицы мы удаляем все классы:

$("#clear").click(function () {
	$('#hover td').each(function(){
		$(this).removeClass();
	});
});

Подсветка ячеек одинакового цвета, при наведении на маленькие квадратики:

$('#small td').hover(
	function(){var hit = this.className; $("#hover td."+hit).toggleClass('hovered');},
	function(){var hit = this.className; $("#hover td."+hit).toggleClass('hovered');}
);

$('#small td') — выбирает все ячейки в объекте с id=small (мини-таблица справа с образцами цвета).
.hover — назначает обработчик «при наведении курсора». Чтобы назначить обработчик, необходимо задать две функции: первая выполнится при наведении курсора мыши на объект, вторая — при перемещении курсора мыши за пределы объекта. Для удобства мы будем использовать две анонимные функции (в данном примере их код совпадает).
var hit = this.className — получает значение текущего класса ячейки (то есть получает класс цвета), для примера — пусть мы навели на красный (класс c7).
$("#hover td."+hit), или в нашем примере $("#hover td.c7") — находит в объекте с id=hover все ячейки с классом c7
Для каждой найденной ячейки сработает метод .toggleClass('hovered'), который добавит класс hovered к элементу, если его нет, и удалит класс hovered, если элемент уже обладает таковым.

Как изменяется HTML код страницы. До того, как навели мышкой на объект:

И после:

Пример 2. Подсвечиваем игроков в турнирной таблице

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

$('#hover span').hover(
	function(){var hit = this.className; $("#hover span."+hit).toggleClass('hovered');},
	function(){$("#hover span.hovered").removeClass('hovered');}
);

Первая функция осталась неизменой, а вот вторая (которая срабатывает при перемещении курсора мыши за пределы объекта) претерпела изменения:
$("#hover span.hovered").removeClass('hovered') — ищет все элементы span с классом hovered в элементе с id=hover и убирает класс hovered. То есть, все подсвеченные элементы потеряют свою подсветку.

Если у вас есть более элегантное решение — прошу в комментарии.