如何<div>从 <divs> Django 模板中的多个循环中选择

Question

我想使用一个按钮进入数据库，我有一个事件监听器，它正在获取数据并发出ajax请求。

我的代码如下：

home.html->

{% for fig in user_figs %}
<div class='card'>
{% if fig.chart %}
<input type="hidden" id="card_chart" value="{{ fig }}"> 
<input type="hidden" id="card_filter_id" value="{{ fig.filter_id }}">
{{ fig.chart|safe }}
{% endif %}
</div>
{% endfor %}

型号如下：

class Card(models.Model):
filter_id = models.CharField(max_length=120)
title = models.CharField(max_length=120)
chart = models.TextField()
profile = models.ForeignKey(Profile, on_delete=models.CASCADE)
dashboard = models.ForeignKey(Plot, on_delete=models.SET_NULL, null=True)
created = models.DateTimeField(auto_now_add=True)
updated = models.DateTimeField(auto_now=True)
def save(self, *args, **kwargs):
if(len(self.filter_id) == 0):
self.filter_id = str(uuid.uuid1())
super(Card, self).save(*args, **kwargs)
def __str__(self):
return f"Card title: {self.title} Card id: {self.filter_id}"

JS中的事件侦听器如下所示：

save_changes_button.addEventListener('click', ()=>{
console.log("SAVE CHANGES BUTTON CLICKED")
const card_id = document.getElementById('card_filter_id').value
console.log(card_id)
const form_data = new FormData()
form_data.append('csrfmiddlewaretoken', csrf_token)
form_data.append('name', name_of_dashbaord)
form_data.append('title', title)
form_data.append('chart', fig)
form_data.append('card_id', card_id)
$.ajax({
type: 'POST',
url: '/card/save/',
data: form_data,
success: function(response){
console.log(response)
},
error: function(error){
console.log(error)
},
processData: false,
contentType: false,
})
})

现在，当用户点击按钮时，我想在数据库中输入一个条目，如下所示：

def create_card_view(request):
if(request.is_ajax()):
name = request.POST.get('name')
card_id = request.POST.get('card_id')
author = Profile.objects.get(user=request.user)
dashboard = Plot.objects.get(name=name)
card = Card.objects.get(filter_id=card_id)
card.dashboard = dashboard
card.save()
return JsonResponse({'msg': f'CARD ADDED TO DASHBOARD {dashboard.name} SUCCESSFUlLY BY {author}'})
return JsonResponse({'msg': 'empty'})

我遇到的问题是

const card_id = document.getElementById('card_filter_id').value

总是在运行循环时获得列表中最后一个元素的id，最后一个元件的值存储在这里，但我希望获得单击按钮的卡的id。如何获取用户点击"添加到仪表板"按钮的卡片的card_filter_id(参考前端的img(

Answer 1

不要在循环中添加id，因为id应该是唯一的。尝试从点击事件中获取id，如

function myfunc(event){
console.log(`Value : ${event.target.getAttribute('value')}`);
}

<input type="button" onclick="myfunc(event)"  value="1">
<input type="button" onclick="myfunc(event)"  value="2">
<input type="button" onclick="myfunc(event)"  value="3">
<input type="button" onclick="myfunc(event)"  value="4">