Javascript/Django: изменение иконки на динамически созданном элементе на основе значения запроса или щелчка мыши

Я попробовал несколько способов заставить иконку меняться на кнопке, которая была создана с помощью цикла for при загрузке страницы. Вот мой элемент:


{% for i in data %}
    <div class="accordion">
        <div style="margin-left: -10px;">
            <a href="#collapse{{ i }}", class="btn", role="button", data-bs-toggle="collapse" id="btn-collapse_{{ i }}">
            <i class="material-icons" style="vertical-align: middle;">expand_more</i>
            <label style="vertical-align: middle;">{{ i }}</label>
            </a>
        </div>
    </div>
{% endfor %}

Вот моя функция для изменения иконки:

<script>
    $(document).ready(function(){
        $('#btn-collapse_{{ i }}').on('click', function () {
            var thisElement = $(this);
            var anchorElement = thisElement.find("i");
            if(anchorElement.text() === "expand_less"){
                anchorElement.text('expand_more');
            } else {
                thisElement.find("i").text("expand_less");
            }
        });
    });
</script>

Я также попробовал изменить цвет в другом элементе. Вот элемент:


<tbody>
{% for i in data %}
    <tr style="vertical-align: middle;">
        <td><a href="#">{{ i }}</a></td>
        <td>{{ i.data1 }}</td>
        <td><a href="#">{{ i.data1 }}</a></td>
        <td style="text-align: center;">
            <button class="btn", id="btn-{{ i.data2 }}">
                <i class="far fa-check-circle"></i>
            </button>
        </td>
        <td style="text-align: center;">
            <button class="btn", id="btn-{{ i.data3 }">
                <i class="far fa-check-circle"></i>
            </button>
        </td>
    </tr>
{% endfor %}
</tbody>

А вот функция:


<script>

    $(document).ready(function(){
        var data_button = document.getElementById("btn-{{ i.data2 }}");
        if({{ i.data2 }} == 'None'){
            data_button.style.color = "#858796";
        } 
        else {
            data_button.style.color = "#1cc88a";

        }
    
    });

</script>

Данные, которые запрашиваются во втором экземпляре, либо 'None', либо дата.

В своем скрипте вы написали {{ i }} вне цикла for. Используйте class вместо id, потому что если вы получите элемент с id, он получит только первого ребенка, в то время как class получит всех. И вам не нужны запятые между атрибутами элементов.

<a href="#collapse{{ i }}" class="btn" data-id="{{forloop.counter}}" role="button" data-bs-toggle="collapse" id="btn-collapse_{{ i }}">

<script>
    $(document).ready(function(){
        $('.btn').on('click', function () {
            data_id = $(this[data-id])
            var thisElement = $(this).filter('[data-card="'+data_id+'"]');
            var anchorElement = thisElement.find("i");
            if(anchorElement.text() === "expand_less"){
                anchorElement.text('expand_more');
            } else {
                thisElement.find("i").text("expand_less");
            }
        });
    });
</script>

Я использую jQuery. Пожалуйста, включите его в тег head

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Мне пришлось изменить скрипт, который предоставил enes islam, вот как я получил его в итоге:

<a href="#collapse{{ i }}" data-id_collapse="{{ forloop.counter }}" class="btn" role="button", data-bs-toggle="collapse" id="btn-collapse_{{ i }}">


    <script>
        $(document).ready(function(){
            $('.btn').on('click', function () {
                data_id = $(this).attr('data-id');
                var thisElement = $(this).filter('[data-id=' +data_id+ ']');
                var anchorElement = thisElement.find("i");
                if(anchorElement.text() === "expand_less"){
                    anchorElement.text('expand_more');
                } else {
                    anchorElement.text('expand_less');
                }
            });
        });
    </script>
Вернуться на верх