Перейти к содержанию
stasone

[Решено] Как на каждом нечетном выводе добавлять class css?

Рекомендуемые сообщения

Нужно реализовать меню у которого пункты находятся в шахматном порядке, один человек посоветовал добавлять класс каждому нечетному пункту меню. А как это сделать не пойму. Кто  сможет объяснить?

Вот скрин меню:  

 post-30812-0-37861800-1382007060.jpg

 

Обычный вывод вот: 

if ($this->category_id == $result['category_id']) {
			$categoryhome[$i]['href'] = $this->url->link('product/category', 'path=' . $new_path);
			
			} else {
			$categoryhome[$i]['href'] =  $this->url->link('product/category', 'path=' . $new_path);
			}
			if ($result['image']) {
						$image = $result['image'];
					} else {
						$image = 'no_image.jpg';
					}
			$categoryhome[$i]['thumb'] = $this->model_tool_image->resize($image, 185, 138);
			$categoryhome[$i]['name'] = $result['name'];

А вот с выборкой по четности не могу придумать. 

Помогите кто чем сможет.

PS: У WP есть такая реализация но её сюда применить не получится, или у меня не хватает на это ума((

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

$('#menu_container div:odd').attr('class', 'odd');

$('#menu_container div:even').attr('class', 'even');

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Извиняюсь за тупость, но можно полный код?

Изменено пользователем afwollis
overquote deleted

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

верстаете, грубо говоря:

<div id="menu_container">
<div style="background:url('/path/to/image_bg_1.png');"><a href="menu_link_1">Постельное бельё</a></div>
<div style="background:url('/path/to/image_bg_2.png');"><a href="menu_link_2">Одеяла</a></div>
<div style="background:url('/path/to/image_bg_3.png');"><a href="menu_link_3">Подушки</a></div>
<div style="background:url('/path/to/image_bg_4.png');"><a href="menu_link_4">Полотенца</a></div>
<div style="background:url('/path/to/image_bg_5.png');"><a href="menu_link_5">Халаты</a></div>
...
</div>
<script type="text/javascript"><!--
$('#menu_container div:odd').find('a').attr('class', 'odd');
$('#menu_container div:even').find('a').attr('class', 'even');
//--></script>
  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Как я не пытался приспособить Ваш вариант у меня не заработало, я думаю проблема в том что у меня немного не такой вывод и все привязано к модулю. Вот как у меня выводится все:


<div class="category-home-content">
<div class="categoryathome">
  <div class="this-tov">
      <div class="image"><a href="/index.php?route=product/category&path=59"><img src="/image/cache/data/system/category-img/postel-185x138.jpg" title="Постельное бельё" alt="Постельное бельё" /></a></div>
      <div class="name-home"><a href="/index.php?route=product/category&path=59">Постельное бельё</a></div>
</div>
<div class="this-tov">
      <div class="image"><a href="/index.php?route=product/category&path=60"><img src="/image/cache/data/system/category-img/odeialo-185x138.jpg" title="Одеяла" alt="Одеяла" /></a></div>
      <div class="name-home"><a href="/index.php?route=product/category&path=60">Одеяла</a></div>
</div>
...
Изменено пользователем afwollis
overquote deleted

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

<script type="text/javascript"><!--

$('div.categoryathome div.this-tov:odd').find('div.name-home').addClass('odd');

$('div.categoryathome div.this-tov:even').find('div.name-home').addClass('even');

//--></script>

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Насколько я понимаю ваш скрипт должен находить класс name-home и прибавлять еще один клас odd или even?

Изменено пользователем afwollis
overquote deleted

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

грубо говоря - да.

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

грубо говоря - да.

Тогда я вообще ничего не пойму. Вывод не меняю, оставлю все как есть. Подключаю только скрипт в таком виде: 

<script type="text/javascript">
$('#categoryathome div.this-tov:odd').find('div.name-home').addClass('odd');
$('#categoryathome div.this-tov:even').find('div.name-home').addClass('even');
</script>

и все равно новый класс не появляется (( 

Что я могу не так делать?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

заново сообщение пересмотрите - я отредактировал код сразу после публикации.

заменил поиск по id на поиск по css-class.

проверил с вашей версткой - все работает.

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

заново сообщение пересмотрите - я отредактировал код сразу после публикации.

заменил поиск по id на поиск по css-class.

проверил с вашей версткой - все работает.

а сам opencart такую систему не может ломать?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Сейчас у меня такой код получается:

<div class="category-home-content">
<div class="categoryathome">
  <div class="this-tov">
      <div class="image"><a href="/index.php?route=product/category&path=59"><img src="/image/cache/data/system/category-img/postel-185x138.jpg" title="Постельное бельё" alt="Постельное бельё" /></a></div>
      <div class="name-home"><a href="/index.php?route=product/category&path=59">Постельное бельё</a></div>
</div>
<div class="this-tov">
      <div class="image"><a href="/index.php?route=product/category&path=60"><img src="/image/cache/data/system/category-img/odeialo-185x138.jpg" title="Одеяла" alt="Одеяла" /></a></div>
      <div class="name-home"><a href="/index.php?route=product/category&path=60">Одеяла</a></div>
</div>
...
</div>
</div>
<script type="text/javascript">
$('#categoryathome div.this-tov:odd').find('div.name-home').addClass('odd');
$('#categoryathome div.this-tov:even').find('div.name-home').addClass('even');
</script>

Все правильно?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Вот я тупень!! 

Спасибо очень помогли!!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.