Javascript/Django: change icon on dynamically created element based on query value or click-CodePudding

I have tried couple of ways to get icon to change on a button, that has been created with for loop on page load. Here is my element:


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

Here is my function to change the icon:

<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>

I've also tried changing the color in in another instance. Heres the element:


<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 , id="btn-{{ i.data2 }}">
                <i ></i>
            </button>
        </td>
        <td style="text-align: center;">
            <button , id="btn-{{ i.data3 }">
                <i ></i>
            </button>
        </td>
    </tr>
{% endfor %}
</tbody>

And here is the function:


<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>

Data that is being queried in second instance is either 'None' or date.

CodePudding user response：

In your script you wrote {{ i }} outside of for loop. Use class instead of id because if you get an element with id it will get only the first child, while class receives all. And you don't need commas between your element attributes.

<a href="#collapse{{ i }}"  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>

I use jQuery. Please include it in your head tag

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

CodePudding user response：

I had to modify the script enes islam provided, this is how I got it in the end:

<a href="#collapse{{ i }}" data-id_collapse="{{ forloop.counter }}"  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>