javascript - Django 模板 : How to refer to individual objects in for loop in Javascript?

Question

我正在使用 Django 构建一个在线拼图应用程序，其中包含解决方案功能。每个解决方案都有一个 up_vote 和 down_vote 字段，每个字段都是具有 User 模型的 ManyToManyFields。我获取每个字段的 .count() 并减去它们来计算净票数。

我正在尝试创建一个功能，以便当用户单击“向上”按钮时，解决方案的 up_vote 字段会更新。我正在考虑使用 Ajax 来实现此目的。为了做到这一点，我需要能够引用 Javascript 中的具体解决方案。这是我当前的模板:

{% for solution in solutions %}
            <div class="card bg-light">
                <div class="card-header subtitle">
                        <div class="triple-left">{{ solution.datetime }} by <a href="{% url 'profile' username=solution.user.username %}">{{ solution.user.username }}</a></div>
                        {% if user == solution.user or user.profile.teacher %}
                        <div class="triple-right">
                            <a href="{% url 'edit_solution' puzzleID=solution.puzzle.id solutionID=solution.id %}">edit</a>
                            &nbsp;&nbsp;
                            <a class="delete" href="{% url 'delete_solution' puzzleID=solution.puzzle.id solutionID=solution.id %}">delete</a>
                        </div>
                        {% endif %}
                        <div class="triple-center">
                            <a class="up-not-clicked" id="up_vote">&uArr;</a>
                            &nbsp;&nbsp;
                            {{ solution.points }}
                            &nbsp;&nbsp;
                            <a id="down_vote">&dArr;</a>
                        </div>
                </div>
                <a href="{% url 'solution' puzzleID=solution.puzzle.id solutionID=solution.id %}">
                <div class="card-body">
                    <h5 class="card-title">{{ solution.title }}</h5>
                    <p class="card-text">{{ solution.content|linebreaks }}</p>
                </div>
                </a>
            </div>
        <br>
    {% endfor %}

注意这一行:

<a class="up-not-clicked" id="up_vote">&uArr;</a>

在我的 Javascript 中，我有一个事件监听器，用于监听单击该事件的事件。这是我的 JavaScript:

$(document).ready(function(){
    $('#up_vote').on('click', function () {
        console.log(!!I need some way of referring to the solution that was clicked!!)
    });
});

在我的 Javascript 中，如何引用已投票的特定解决方案对象？

谢谢

编辑:根据 wtreston 的要求添加模型

我的模型:

class Solution(models.Model):
user = models.ForeignKey(
    User,
    on_delete=models.CASCADE,
)
puzzle = models.ForeignKey(
    Puzzle,
    on_delete=models.CASCADE,
)
title = models.CharField(max_length=30)
content = models.TextField()
up_votes = models.ManyToManyField(User, related_name='up_votes', blank=True)
down_votes = models.ManyToManyField(User, related_name='down_votes', blank=True)
datetime = models.DateTimeField(default=timezone.now, blank=True)

@property
def points(self):
    return self.up_votes.count() - self.down_votes.count() + 1

def __str__(self):
    return self.title

class Comment(models.Model):
user = models.ForeignKey(
    User,
    on_delete=models.CASCADE,
)
solution = models.ForeignKey(
    Solution,
    on_delete=models.CASCADE,
)
title = models.CharField(max_length=30)
content = models.TextField()
datetime = models.DateTimeField(default=timezone.now, blank=True)

def __str__(self):
    return self.title

Answer 1

因此，首先最好的做法是创建一个名为“评级”的新表，该表存储对其进行评级的用户、他们正在评级的谜题以及是赞成票还是反对票。

接下来解决您的 JavaScript 问题:ID 应该是唯一的，因此在这种情况下最好使用类作为标识符。为了获取拼图 ID，我将使用 jinja 将项目 ID 设置为拼图 ID，如下所示:

<a class="up-not-clicked" id="{{ puzzle.ID }}">&uArr;</a>

现在介绍 JavaScript:

$(document).ready(function(){
    $('.up-not-clicked').each(function(){
        $(this).on('click', function(){
            var puzzleID = $(this).id;
            //Your code here
        })
    })
});

现在您有了拼图 ID，您可以使用它来查找用户点击了哪个拼图