Как выделить выбранный пункт?

Question

[PiterBacktner]

Такая проблема. CMS Prestashop. На странице товара есть атрибуты, в данном значении это "размер". При наведении курсора выбранный размер подсвечивается, то есть квадратик с надписью "48" становится чёрным. Но если его выбрать, нажать на этот размер, то выделения никак не происходит. Он остаётся таким же как и все, белым. Очень прошу помощи. Надо что бы при выборе размера, ячейка с этим значением и оставалась чёрного цвета.
Пример страницы сайта https://ddclothes.ru/index.php?id_product=234&cont...
Код страницы pastebin.com/QYxLCG69 328 строчка код атрибутов

Comments

[Ильдар Гизетдинов]

Вы там поломали))

Answer 1

[Ильдар Гизетдинов]

строка 356

<li{if ($group.default == $id_attribute)} class="active"{/if}>
    <input onchange="$(this).parent().parent().find('li').removeClass('active').find('input:checked').parent().addClass('active')" type="radio" class="attribute_radio" name="{$groupName|escape:'html':'UTF-8'}" value="{$id_attribute}" {if ($group.default == $id_attribute)} checked="checked"{/if} />
    <span>{$group_attribute|escape:'html':'UTF-8'}</span>
</li>

в стилях дописать

было #attributes .attribute_list ul li:hover

стало #attributes .attribute_list ul li:hover, #attributes .attribute_list ul li.active

Answer 2

[Ankhena]

input:checked + span {}

И я бы span заменила на label

Comments

[Ильдар Гизетдинов]

А вы в курсе что подсветка там висит не на span?...

[Ankhena]

Ильдар Гизетдинов: почему бы это не изменить?

[Ильдар Гизетдинов]

Ankhena W: Потому что автор не специалист, чтобы это изменить

[Ankhena]

Ильдар Гизетдинов: оххххх боже ж мой
1. А в ссылке с примером именно так и сделано, input + label, у автора span, поэтому я и предложила такой простой вариант.

2. В Вашем варианте надо дописать инлайн js в input, в моем только поменять span на label. И кода больше всего на 2 буквы и семантически правильнее.
В стилях добавка примерно одинаковая, а лишних классов не добавляется.

Дальше автору решать какой вариант симпатичнее.

[PiterBacktner]

Автор объединил оба варианта ответа и сделал))

[Ankhena]

PiterBacktner: автор крут :)

[PiterBacktner]

Ankhena W: Нет, это Ankhena W и Ильдар Гизетдинов крутые. Автор немощ)

[Ankhena]

Ильдар Гизетдинов:
Ну сами подумайте, если бы где-то было уже написано input:checked + span, без указания родителя, то автор уже бы заметил, что выбранный размер подсвечивается, но не так как хотелось бы. И тогда вопрос и ответ был бы только про изменение стилей.

:)

А если писать родительские селекторы

#attributes .attribute_list li input:checked + span

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

[Ильдар Гизетдинов]

Ankhena W: ладно, в любом случае автор что то там нахимичил, а получился ни мой, ни ваш вариант))))

[PiterBacktner]

Ильдар Гизетдинов: Да вроде норм получилось, не?))

[Ильдар Гизетдинов]

PiterBacktner: у вас теперь наведение не работает, либо у меня кэш))

[Ankhena]

Ильдар Гизетдинов: я тоже всегда так делаю, у всех все узнать и сделать комбо.
Главное автор доволен, нам ли тогда печалиться :)

[PiterBacktner]

Ильдар Гизетдинов: Просто теперь вместо черного квадрата выделяется красной точечкой. Главное работает и клиент будет видеть что выбрал)