Замена класса у множества одинаковых блоков
 

Приветствую! Сначала опишу задачу: делаю смену вывода товаров в интернет магазине с 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.

Благодарю за внимание господа, и уповаю на вашу поддержку.

Neibo,
Так попробуйте вместо id использовать class для отбора элементов в коллекцию:

$(".Product_Block").toggleClass("Grid_Product_Block").toggleClass("List_Products_Block");

Естественно на сервере надо обеспечить вывод товаров с этим классом, а не id.

Логично, конечно. Но, в моем примере id Product_Block не имеет никаких стилей а служит лишь идентификатором для js.

Только что попробовал использовать:

<div class="Product_Block" class="Grid_Product_Block">

и

$(".Product_Block").toggleClass("Grid_Product_Block").toggleClass("List_Products_Block");

= Работает! Но до переключения блоки товара отображаются коряво, как будто часть стилей отсутствует. Подозреваю, что это из-за того, что у класса Product_Block нет стилей вообще и использую я его, опять таки, как "идентификатор" для js.

Спасибо за ответ, уже ближе к истине.

<div class="Product_Block Grid_Product_Block">

Должно заработать. По Product_Block отсеиваете, Grid_Product_Block переключаете.

Точно! Все заработало, спасибо Вам огромное!