Здравствуйте. Нужна помощь в 2 вопросах.
Для понимания даю ссылку на пример:
takercorporation.com
1) При наведении на карточку товара появляется блок с выбором изображений.
Как это сделать для одной карты я знаю, но проблема в том, что таких карточек будет много.
Как можно оптимизировать код, чтобы не было повторов?
Код JavaScript (jQuery):
var itemCatalog_1 = $('.products__item_1 .slider_mini_item'),
itemCatalog_2 = $('.products__item_2 .slider_mini_item'),
imageCatalog_1 = $('.products__item_1 .products__item_slider img'),
imageCatalog_2 = $('.products__item_2 .products__item_slider img');
itemCatalog_1.on('click', function(e){
e.preventDefault();
var itemCatalogThis = $(this).attr('href');
itemCatalog_1.removeClass('slider_mini_item_active');
$(this).toggleClass('slider_mini_item_active');
imageCatalog_1.removeClass('products__item_slider_active');
$(itemCatalogThis).addClass('products__item_slider_active');
});
itemCatalog_2.on('click', function(e){
e.preventDefault();
var itemCatalogThis = $(this).attr('href');
itemCatalog_2.removeClass('slider_mini_item_active');
$(this).toggleClass('slider_mini_item_active');
imageCatalog_2.removeClass('products__item_slider_active');
$(itemCatalogThis).addClass('products__item_slider_active');
2) При клике на категорию (в примере по ссылке от "Одежда" до "Распродажа") появляется каталог, как его закрыть при повторном нажатии на категорию?
Код JavaScript (jQuery):
var tabsHeaderLinks = $('.header__level-3_link a'),
tabsHeader = $('.header__level-3_link'),
tabsHeaderContent = $('.header__level-4_grid');
tabsHeaderLinks.on('click', function(e){
e.preventDefault();
var tabsLink = $(this).attr('href');
tabsHeaderLinks.removeClass('header__level-3_link-active');
$(this).toggleClass('header__level-3_link-active');
tabsHeaderContent.removeClass('header__level-4_grid-active');
$(tabsLink).toggleClass('header__level-4_grid-active');
});
