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

首先，最好的做法是创建一个名为＆＃39; Ratings＆＃39;例如，它存储评级它的用户，他们评级的拼图，并且它是一个upvote或downvote。

下一步针对您的JavaScript问题： ID应该是唯一的，因此在这种情况下，您最好使用类作为标识符。为了获得谜题ID，我会使用jinja将项目ID设置为谜题ID，如下所示：

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

现在为javascript：

document.getElementById("accTabs").innerHTML = "<a onclick="document.getElementById('id01').style.display='block'" class="w3-bar-item w3-button" id="log"><i class="fas fa-users"></i> SIGN IN</a>";

现在你有了拼图ID，你可以用它来找到用户点击的拼图

Django模板：如何在Javascript中引用for循环中的单个对象？

1 个答案: