Как оптимизировать js?

Question

[Сергей Кравченко]

Есть сайт, demo8.saitobaza.ru/moloko , на нем есть вызов модального окна по средствам фенсибокс take.ms/DABNG , в этом модальном окне у нас есть 6 товаров take.ms/lmVcJ . и надо что бы при клике на товар открывалась карточка товара take.ms/IhY8H , в этом же модальном окне. Я использую весьма примитивный метод который будет при клике скрывать все товара и отображать скрытый товар, что то на подобие этого

$('.prod').click(function(data){
    $('.product-1').addClass('hidden');
    $('.product-md-1').removeClass('hidden');
});
$('.prod2').click(function(data){
    $('.product-1').addClass('hidden');
    $('.product-md-2').removeClass('hidden');
});

он реализован не первом и втором товаре take.ms/E2Rdk .
но данный метод не подходит для заказчика так как при добавлении нового товара необходимо будет писать под каждый товар свои строчки скрипта. Нужно оптимизировать этот код таким образом что бы не надо было особо много телодвижений делать для добавления нового товара.

кто может подсказать как это сделать, а то моих знаний просто не хватает для реализации этого функционала

Answer 1

[Максим Тимофеев]

Сделать класс не .prod1 и .prod2, а просто .prod, добавить атрибут data-num и фсе:

$('.prod').click(function(){
var num = $(this).attr('data-num');
    $('.product-'+num).addClass('hidden');
    $('.product-md-'+num).removeClass('hidden');
});

Comments

[Сергей Кравченко]

спасибо, очень помогло, не могли бы вы еще подсказать как сделать листалку между между товарами, типа как то так take.ms/Jwz4f ? Как сделать в перед то можно применить этот же метод, но вот как сделать чтобы с первой на последнюю перекидывало, и на оборот с последней на первую.

[Максим Тимофеев]

Сергей Кравченко: для листалок есть готовые решения типа fotorama.io.

[Максим Тимофеев]

Сергей Кравченко: Можете даже ответом отметить. Спасибо в статистику не сохранишь.

[Андрей Малиновский]

Раз вы все нумеруете лучше тогда ставить id, а не class для товара.