单击鼠标后，如何在Django中显示预览中的更多数据？

Question

数据库具有以下字段：id，标题，预览，titleWork，fullDescription，每一行。 单击预览后，我找不到显示完整数据库行的方法。

我运行循环以显示预览列表内容。 当我单击列表中的图像时，console.log始终是数据库的最后一个元素，但是我需要单击该元素的ID才能显示其他数据。 单击后如何获取单击的元素的ID？

{% for listing in listings %}

    <img class="carousel" id="{{ listing.id}}" onclick="idNumber()" src="{{ 
     listing.preview.url }}" alt="{{ listing.titleWork }}" title="{{ 
     listing.titleWork }}">

        <script>
            function idNumber(){
                idNumb_ = document.getElementById('{{ listing.id | safe}}')
                console.log(idNumb_);
            }
        </script>

{% endfor %}

Answer 1

尝试这种方式：

{% for listing in listings %}
    <img class="carousel" 
         id="{{ listing.id}}" 
         onclick="idNumber({{ listing.id}})" 
         src="{{ listing.preview.url }}" 
         alt="{{ listing.titleWork }}" 
         title="{{ listing.titleWork }}">
{% endfor %}

<script>
    function idNumber(imgId){
        var idNumb_ = document.getElementById(imgId)
        console.log(idNumb_);
    }
</script>

您的方法无法正常工作，因为您创建了idNumber函数的len(listings)副本，并且前一个副本被下一个覆盖