Как реализовать динамический интерфейс?

Question

[zeaovede]

на сайте есть три кнопки 1,2,3. Сейчас под каждой кнопкой выводится 5 кнопок 1,2,3,4,5. Как сделать так, чтобы при нажатии на кнопку 1 выводилось 3 кнопки - 1,2,3, при нажатии на кнопку 2 выводилось 4 кнопки - 1,2,3,4.
Не уверен, что такое получится провернуть средствами css. Но на js наверняка не сложно будет. Хотелось бы увидеть ответ с примером данной реализации

Comments

[Дмитрий Кузнецов]

Вы имеете ввиду что- то типо "спойлеров"?

[zeaovede]

Дмитрий Кузнецов, вот https://gameboost.com/wr/solo-boost


Как видите, при выборе "Iron" в блоке Ranked marks выводится 3 кнопки от 0 до 2

А при выборе более высокого ранга выводится уже 7 кнопок от 0 до 6

Допустим, я знаю как вывести эти кнопки в статическом режиме, подключить, заставить их функционировать, но я не знаю, как сделать так, чтобы под конкретный ранг отображалось определённое количество кнопок

[Дмитрий Кузнецов]

zeaovede, подправил свой ответ.

[Модератор]

На вопрос «как сделать» отвечает документация и поиск в интернет.

Тут отвечают на вопросы «почему я сделал, как в документации, а оно не работает. Поискал в интернет, вот запросы, в ответах не нашел. Что я делаю не так?»

Покажите, как вы пробовали решить проблему, приведите код попытки (пусть неудачной), опишите, как запускали, что ожидали и что получилось.
За готовыми решениями - на фриланс. В текущем виде это не вопрос, а задание. Нарушен п.5.12 Регламента.

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента. Также обратите внимание на п.3.4

[zeaovede]

Evgenii, там не совсем все так просто, как ты говоришь. Интерфейс данных кнопок идет с некоторой подвязкой к php, как и вся система расчетов. Иначе как объяснить, если удалить данный кусок кода

spoiler

<script>
    const base_url = "https://gameboost.com";
    const api_url = "https://x-api.gameboost.com";
    const asset_url = "https://gameboost.com/public/assets";
    const ajax_url = "https://gameboost.com/ajax";
    const icon_url = "https://gameboost.com/public/assets/uploads/icons";
    const session_token = "";
    const user_type = "client";
    const user_id = "";
  </script>

то интерфейс с необходимыми для меня кнопками разваливается.
Однако, если оставить код в таком исполнении

<script>
    const base_url = "";
    const api_url = "";
    const asset_url = "";
    const ajax_url = "";
    const icon_url = "";
    const session_token = "";
    const user_type = "";
    const user_id = "";
  </script>

то все работает. Это может говорить о том, что интерфейс кнопок на js, но со 100% подвязкой к php. Вообще я любитель покапаться в коде, но все правки вношу путем сравнения. Тобишь, логику работы на интуитивном уровне прочитать могу. Другими словами, в голове уже сложенный пазл, но определенная часть деталей из пазла утеряна

Answer 1

[Дмитрий Кузнецов]

UPD:
Посмотрел что вы хотите сделать и переписал ответ.

По сути вам нужно 1 массив и 3 div блока для вывода контента. В массиве будет примерно следующая структура:
- Все ранги
-- У конкретного ранга будет ещё массив с цифрами (римскими).
--- У римских цифр будет ещё массив (с простыми цифрами)
Это примерная структура. Возможно я что-то не так понял.

Потом вы выводите массив (кнопки) в первый div. Он будет отвечать за ранги. Навешиваете событие на кнопки (по ключу ранга) и во втором div будут выводиться римские цифры. На эти цифры вы то же вешаете событие. Так же и с последним массивом.

По сути как-то так. Если структура немного другая - алгоритм примерно тот же.

Comments

[zeaovede]

Спасибо за уделённое время. Однако, без примера это не имеет силы для меня. Так как я могу только путем наблюдения вносить правки в код, добавлять, изменять