Приветствую! Сначала опишу задачу: делаю
смену вывода товаров в интернет магазине с Grid на List, с плиток на список.
Как я делал это изначально:
В документе создал два цикла вывода товаров и плиткой и списком (php). Блоку со списком в css указал display: none;, так как вывод плиткой - дефолтный. Далее c помощью jquery организовал такую элементарную конструкцию:
$(document).ready(function() {
/*По нажатию на кнопку показа Grid разметки - прячу List разметку и показываю Grid*/
$("#ShowGridBtn").click(function(){
$(".List_Product_Block").hide();
$(".Grid_Product_Block").show();
});
/*По нажатию на кнопку показа List разметки - прячу Grid разметку и показываю List*/
$("#ShowListBtn").click(function(){
$(".List_Product_Block").show();
$(".Grid_Product_Block").hide();
});
});
Казалось бы, почему нет? Но, как обычно, за углом притаилось вонючее волосатое "Но". И вот в чем оно заключается:
"Плитка" товара состоит из картинки, названия и цены.
Блок товара в "Списке" состоит из картинки, названия, цены, описания и кнопки купить.
Поэтому имея на странице оба цикла с выводом и плиткой и листом я получаю на одной странице кучу дублирующегося контента и ссылок на каждый товар (по две одинаковые картинки, названия и цены). А это плохо с точки зрения SEO.
Если бы не мой чертов перфекционизм, клянусь, оставил бы как есть. Но, как вы уже поняли, я принял решения оставить один единственный блок с товаром и по
нажатию на кнопку смены вида - менять классы у этого блока. .
Как я пытался это сделать:
<div id="Product_Block" class="Grid_Product_Block">
.
.
.<!--Тут контент блока-->
.
.
</div>
Вот что я делал в js:
$("#Product_Block").toggleClass("Grid_Product_Block").toggleClass("List_Products_Block");
Не было предела моему счастью когда я увидел
первый товар на странице - его классы изменились.
Пролистав страниц чуть ниже я обламался, так как остальные блоки с товарами остались без изменений.
Логично
так как классы поменялись только у первого товара из-за того, что у каждого товара был одинаковый ID (Product_Block), который должен быть уникален на странице.
Вот и вопрос - как это сделать, точнее с помощью чего и какова схема действий.
Писать за меня не обязательно (но буду благодарен за элементарный пример) укажите в сторону каких функций смотреть, если подобное делается не с помощью toggleClass.
Благодарю за внимание господа, и уповаю на вашу поддержку.