воскресенье, 27 ноября 2011 г.

Понадобилось мне тут на одном проекте (магазин на Shop-Script’e) сделать красивое сравнение товаров, чтобы при нажатии checkbox’а у товара менялся цвет рамки. Решение нашлось довольно быстро, спасибо гуглу :)

Итак, подключаем jquery и прописываем вот такой простенький кусок кода

$(function() {
$(".compare_check").change(function() {
if($(this).is(':checked'))
$(this).parents('li').addClass('products_select');
else
$(this).parents('li').removeClass('products_select');
});
})

Сама разметка будет вот такого вида



Из кода скрипта видно, что при изменении состояния чекбокса, родителю li задается класс products_select, стили которому можно уже задать любые. В моем случае это была замена рамки с серой на голубую и задание небольшой тени вокруг (выглядит красиво).
Живой пример
источник http://makexhtml.ru/2011/vydelenie-elementa-pri-nazhatii-chekboksa-jquery/

Комментариев нет:

Отправить комментарий