在 django (for) 中访问元素答案

【问题标题】：Accessing an element in django (for)在 django (for) 中访问元素
【发布时间】：2020-12-10 19:41:20
【问题描述】：

我有一个 Django 模板，其中包含以下代码，它创建多个按钮并尝试在单击时隐藏/显示描述文本（在每张卡片的同一个按钮上）：

{% for comida in comidas %}


            {% if comida.slug_food == page.slug  %}
            <div class="food2">
                <div id="food-title">{{comida.titulo}}</div>
                <div id="food-price">{{comida.precio|floatformat:"-1"}}€</div>
                <button class="button" onclick="showDescription()">ver+
                <div id="food-description" >
                {{comida.descripcion|safe}}
                </div>
                </button>
                
                <div id="add-cart">AÑADIR AL PEDIDO</div>

                {% if comida.imagen != null %}
                    <img src="{{comida.imagen.url}}"></img>
                {% endif %}

            </div>

            
                {% endif %}


        {% endfor %}

comidas 是一个字符串列表，稍后在我的脚本块中

function showDescription(){
    var showText = document.getElementById("food-description");
    if (showText.style.display === "block"){
        showText.style.display = "none";
    } else {
        showText.style.display = "block";
    }
}

函数运行，但正如您所料，它只在我的 for 循环的第一个元素上运行。

我的问题是 ¿ 有人可以帮助我吗？我想使用我的所有按钮，而不仅仅是第一个元素。

【问题讨论】：

因为冲突的第二个元素的 id 相同 ....

标签： javascript css django templates

【解决方案1】：

使用{{comida.id}} 获取唯一ID：

{% for comida in comidas %}

    {% if comida.slug_food == page.slug  %}
    <div class="food2">
        <div id="food-title">{{comida.titulo}}</div>
        <div id="food-price">{{comida.precio|floatformat:"-1"}}€</div>
        <button class="button" onclick="showDescription('{{comida.id}}')">ver+
        <div id="food-description-{{comida.id}}" >
        {{comida.descripcion|safe}}
        </div>
        </button>
        
        <div id="add-cart">AÑADIR AL PEDIDO</div>

        {% if comida.imagen != null %}
            <img src="{{comida.imagen.url}}"></img>
        {% endif %}

    </div>
    {% endif %}


{% endfor %}

还有 javascript：

function showDescription(comidaId){
    var showText = document.getElementById("food-description-" + comidaId);
    if (showText.style.display === "block"){
        showText.style.display = "none";
    } else {
        showText.style.display = "block";
    }
}

【讨论】：