时间戳

首页 > 解决方案 > Django Javascript：如何在函数中使用带有模板标签的类名作为标识符

javascript - Django Javascript：如何在函数中使用带有模板标签的类名作为标识符

问题描述

我正在使用 for 循环打印出我网站上的所有帖子，每个帖子都有一个表单，允许用户将该帖子添加到列表中。我正在尝试使用 ajax 来执行此操作，以便没有页面刷新。ajax 函数在第一篇文章中有效，但在所有其他文章中都存在问题。我认为问题是由于每个帖子都具有相同的类名，用于识别它，所以这就是为什么我想在类名中使用 forloop 计数器，以便每个帖子都有一个唯一的标识符。

编辑：问题是每个表单上的按钮应该更改类和文本，这在第一篇文章中有效，但在大多数文章中这不起作用。

以下是一些相关代码：

Javascript：

#this is where i want the class to have a tag inside

$('.collection_save_form').submit(function(e){
        e.preventDefault()

        const url = $(this).attr('action')
        const post_id = $(this).attr('name')
        const collection_id = $(this).attr('id')
        const text = $(`.saved_text${collection_id}`).text()
        var saveElement = document.getElementById(`save_btn${collection_id}`);


        $.ajax({
            type: 'POST',
            url: url,
            data: {
                'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val(),
                'post_id': post_id,
                'collection_id': collection_id,


            },
            success: function(response){
                if (saveElement.classList.contains("saved")){
                
                    saveElement.classList.remove("saved")
                    $(`.saved_text${collection_id}`).text('Save')

                } else if (!$(this).hasClass("saved")) {
                    
                    saveElement.classList.add("saved")
                    $(`.saved_text${collection_id}`).text('Saved')
                }

            
                
            },
            error: function(response){
                console.log('error', response)
            }
        })

    })

代码形式为：

{% for item in posts %}

    #irrelevant post data

    {% for collection in collections %}
        <div class="collection_save_container">
        <div class="collection_save_name">{{ collection.collection_name }}</div>
        {% if item.post in collection.posts.all %}

            #here the class of the form should have a class that ends with something like {{ item.id }}
            <form class="collection_save_form" action="{% url 'savepost' item.post.id collection.id %}" method="POST" id="{{ collection.id }}" name="{{ item.post.id }}">
                {% csrf_token %}
                <button type="submit" class="collection_save_btn saved" id="save_btn{{ collection.id }}"><div class="saved_text{{ collection.id }}">Saved</div></button>
            </form>
        {% else %}

            #here the class of the form should have a class that ends with something like {{ item.id}} }}
            <form class="collection_save_form" action="{% url 'savepost' item.post.id collection.id %}" method="POST" id="{{ collection.id }}" name="{{ item.post.id }}">
                {% csrf_token %}
                <button type="submit" class="collection_save_btn" id="save_btn{{ collection.id }}"><div class="saved_text{{ collection.id }}">Save</div></button>
            </form>
        {% endif %}
            </div>
    {% endfor %}

标签： javascriptdjangodjango-templates

解决方案

好的，我为任何有类似问题的人回答我自己的问题

保存元素是指 idsave_btn${collection_id}

var saveElement = document.getElementById(`save_btn${collection_id}`);

但是无法确定这是来自父循环上的哪个帖子，因此需要

var saveElement = document.getElementById(`save_btn${collection_id}${post_id}`);

推荐阅读