Django Javascript：如何在函数中使用带有模板标记的类名作为标识符答案

【问题标题】：Django Javascript: How To Use Class Name With Template Tag Inside As Identifier in FunctionDjango Javascript：如何在函数中使用带有模板标记的类名作为标识符
【发布时间】：2021-04-25 10:50:10
【问题描述】：

我正在使用 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 %}

【问题讨论】：

你能详细说明[..] there are issues有哪些问题吗？？
按钮上的类不会像 ajax 代码那样改变，但它正在处理第一篇文章，所以这就是为什么我认为存在一个它不知道的问题使用哪种形式，这就是为什么我需要找到一种方法来识别每个人，比如在类名中添加一个 id 或其他内容
好的，所以你有一个假设，然后通过检查你的 JS 中发生了什么来确认或否认它？就像每次你点击一个新表单的按钮时，实际正确的表单都会触发事件？
我已经尝试注释掉 javascript 并且表单有效并且类随着页面刷新而改变。所以问题与javascript有关。表单确实触发了事件，因此帖子被添加到列表中，但是按钮存在问题，即没有放置正确的类，或者在尚未点击它时正在放置它。
我认为问题在于进行 ajax 调用。模板中的元素不会在没有页面刷新的情况下重新呈现。看来您必须通过 javascript 刷新或处理更改的类名。

标签： javascript django django-templates

【解决方案1】：

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

save 元素引用 id save_btn${collection_id}

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

但是没有办法确定这是来自父循环上的哪个帖子，所以它需要是

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

【讨论】：