Подсветка одинаковых элементов на JQuery
Иногда возникает потребность подсветить одинаковые объекты на странице. Причем желательно делать это динамически: при наведении курсора мышки или при выборе переключателя. Я долго искал готовое решение с использованием 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
. То есть, все подсвеченные элементы потеряют свою подсветку.
Если у вас есть более элегантное решение — прошу в комментарии.
Подсветка одинаковых элементов на JQuery
Сделал по инструкции… но не работает, выдает ошибку: Uncaught TypeError: Cannot call method ‘zanyatiay’ of null
(anonymous function)
не знаю что и делать, помогите разобраться, пожалуйста.
Ваш комментарий ожидает модерации.
Подсветка одинаковых элементов на JQuery
Сделал по инструкции… но не работает, выдает ошибку: Uncaught TypeError: Cannot call method ‘hover’ of null
(anonymous function)
не знаю что и делать, помогите разобраться, пожалуйста.
вот мой код:
$(‘#01 li’).hover(
function(){var hit = this.className; $(«#zanyatiay img.»+hit).toggleClass(‘hovered’);},
function(){var hit = this.className; $(«#zanyatiay img.»+hit).toggleClass(‘hovered’);}
);
@Василий
Выложите свой код. Можно воспользоваться: pastebin.com
http://pastebin.com/cqQ2Ea6A
и на всякий случай адрес страницы: http://vunderkind.itspromo.ru/classes-for-children
Замечательный скрипт, мне пригодился.
А можно его как-то доработать? Например, что бы по первому клику мыши подсветка фиксировалась, а по второму снова снималась? Что бы можно было несколько одинаковых групп фиксировать первым кликом мыши….