Изменение класса TailwindCSS с помощью Django и JS

У меня есть следующий код:

                        <nav class="mt-4 flex flex-1 flex-col space-y-2 bg-gray-300 space-y-auto"
                             aria-label="Transporters">
                            {% if list_transporters_results|length > 0 %}
                                {% for item in list_transporters_results %}
                                    <div>
                                        <div class="flex flex-row items-center justify-between p-2"
                                             id="container-button-transporter-{{ forloop.counter }}">
                                            <button type="button"
                                                    hx-get="{% url 'tool:results-transporter' slug=item.slug pk=item.pk %}"
                                                    hx-target="#stats" hx-swap="innerHTML" hx-trigger="click"
                                                    class="cursor-pointer"
                                                    id="button-transporter-{{ forloop.counter }}"
                                                    onclick="get_id_transporter(this.id)"
                                            >{{ item.transporter }}</button>
                                            <div class="bg-[#195266] rounded-full p-2 self-center mr-2">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white"
                                                     fill="none"
                                                     viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                          d="M5 13l4 4L19 7"/>
                                                </svg>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            {% else %}
                                <div>
                                    <div class="flex flex-row items-center justify-between">
                                        <p class="text-center">No transporters yet.</p>
                                    </div>
                                </div>

                            {% endif %}

                        </nav>

Моя цель - изменить класс div id="container-button-transporter-{{ forloop.counter }}", нажав на кнопку button-transporter-{{ forloop.counter }}. Используя forloop.counter, я имею div следующего вида:

  • контейнер-кнопка-транспортер-1
  • контейнер-кнопка-транспортер-2
  • и т.д.

Для обновления класса Tailwind у меня есть следующий JS скрипт:

    <script>

        var transporterId;
        var numberTransporter;
        function get_id_transporter(clickedId){
                transporterId = clickedId;
                numberTransporter = parseInt(transporterId.split("-")[2]);
        }

        const button = document.getElementById(`button-transporter-${numberTransporter}`);

        if(button){
        button.addEventListener('click', function handleClick() {
            document.getElementById(`container-button-transporter-${numberTransporter}`).className = "flex flex-row items-center justify-between p-2 bg-[#195266]";
            document.getElementById(`button-transporter-${numberTransporter}`).className = "text-white";
            });
        }
    </script>

Приведенный выше код не работает с переменной numberTransporter. Однако, если я меняю на button-transporter-${1} и container-button-transporter-${1}, он работает. Я не понимаю, почему, поскольку переменная является целым числом. Не могли бы вы объяснить мне, почему?

Вы вызываете функцию get_id_transporter(), когда нажимаете на кнопку, но остальной код выполняется только один раз... когда загружается страница.

В приведенном выше коде var transporterId никогда не устанавливается, пока не будет нажата кнопка. Код, использующий transporterId (после if(button) ), уже выполнен

Если вы измените выражение на ${1}, оно будет работать, потому что button-transporter-1 является фактическим ID. Если изменить его на ${1+1} и button-transporter-2 будет фактическим идентификатором, это также сработает.

Возможно, в вашей логике что-то не так. Я подозреваю, что вы не хотите добавлять слушателя события click после нажатия на кнопку. В любом случае, вы можете просто вызвать код, изменяющий класс, как часть вашей функции get_id_transporter(), например, 

<script>

    function get_id_transporter(clickedId){
            transporterId = clickedId;
            numberTransporter = parseInt(transporterId.split("-")[2]);
            modify_classes(numberTransporter)
    }

    function modify_classes(numberTransporter) {
        document.getElementById(`container-button-transporter-${numberTransporter}`).className = "flex flex-row items-center justify-between p-2 bg-[#195266]";
        document.getElementById(`button-transporter-${numberTransporter}`).className = "text-white";
    }

</script>

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

Вернуться на верх