Как сделать сетку с выделением?

Question

[hrvasiliy]

Как сделать сетку как это сделано в инвентаре стима без форм, но чтобы работало выделение какого-то элемента и было что-то типо описания (как справа в стиме)?


UPD: не понимаю как заменить инпут тайп радио на что-то другое + определить что это именно то, что нажал пользователь (чтобы вывести соответствующую информацию)

Comments

[Алексей Уколов]

В чём конкретно заключается ваш вопрос?

[hrvasiliy]

Алексей Уколов: C вертской все понятно, не понимаю как заменить инпут тайп радио на что-то другое...

[hrvasiliy]

Алексей Уколов: + определить что это именно то, что нажал пользователь (чтобы вывести соответствующую информацию)

Answer 1

[Vitaly Sivkov]

Если вам нужен radio, без использования jquery, можете сделать что-то вроде этого:

<input id="item123" type="radio" name="item" value="123" hidden="hidden">
<label for="item123"><img src="путь к картинке"></label>

Если нужно непременно заменить, навешиваете на блоки id, и отлавливаете у них событие click. При запуске обработчика достаете id и по ней выводите нужную вам информацию. Примерно так: https://jsfiddle.net/sivkoff/e3gcsva7/3/

Comments

[hrvasiliy]

Спасибо, то что нужно. А как интересно все описание подгружается в стим? В хроме в отслеживании XHR запросов нет ничего (кроме подгрузки цены), когда я выбираю новую вещь, то есть информация подгружена уже изначально? И как это должно выглядеть на практике?

[Vitaly Sivkov]

У них сразу при загрузке посылаются запросы.

[hrvasiliy]

Vitaly Sivkov: Ну при первой загрузке загружается вся информация, потом в зависимости от data-id показывает описание? Если так, то я не понимаю почему я в коде не могу найти, например у меня есть "Контейнер тиража #50" после обновления поиск в коде не находит это, если выбрать данный элемент - находит. То есть он каким-то образом скрывается из html при этом он не подгружает эту инфу после загрузки страницы. Наверное, это сделано для того, чтобы не перегружать клиент, но как это может быть сделано?

[Vitaly Sivkov]

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

[Vitaly Sivkov]

Выглядит примерно так: https://jsfiddle.net/sivkoff/e3gcsva7/13/

[hrvasiliy]

Vitaly Sivkov: А, кажется понял, то есть все данные хранятся в переменных, а большое ли ограничение на размер переменных? Потому что инвентарь может быть просто огромным...

[Vitaly Sivkov]

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

[hrvasiliy]

Vitaly Sivkov: Спасибо большое!

[Vitaly Sivkov]

Удачи!