如何在 django 模板中获取列表 html 中的数据 id 到 javascript?

Question

我正在尝试列出几个元素并有可能通过模态编辑它们，我尝试使用 data-id 属性，但这样它仅适用于列表的第一个元素。

这是我的 Html：

{% for job_title in job_title_list %}
<tr>
<td align="center"><div style="width:200px">{{job_title.title}}
<a class="col-xs-1 text-info" data-id="{{job_title.id}}" data-title="{{job_title.title}}" id="update_{{ job_title.pk }}" href="#" data-toggle="modal" data-target="#UpdateModal">
<i class="glyphicon glyphicon-edit"></i>
</a>    
</div> 
</td>
</tr>
{% endfor %}

这是我的JavaScript：

//update
$("#update_{{ job_title.pk }}").click(function(){
var id = $(this).data("id");
var title = $(this).data("title");
$("#update_title").prepend(
"<div id='title_to_update'><label>{% trans 'Nome do cargo' %}</label><input id='job_title' class='form-control' name='title_to_update' value=' ' /></div>"
);
document.getElementById("job_title").value = title;
$("#update_sts").prepend(
"<div id='sts_to_update'><select class='form-control' id='new_sts' name='new_sts'> {% if l.status == '1' %}<option value='1'>{% trans 'Ativo' %}</option><option value='0'>{% trans 'Inativo' %}</option> {% else %} <option value='0'>{% trans 'Inativo' %}</option><option value='1'>{% trans 'Ativo' %}</option> {% endif %} </select></div>"
);
});

Answer 1

目前尚不清楚此 JS 在您的模板中的位置，但问题是，除非您将其移动到for循环内部(我不建议这样做(，否则{{ job_title.pk }}将具有单个值，因此此单击处理程序将仅附加到一个元素。

由于此 ID 似乎是 JS 中唯一依赖于特定job_title元素的东西，并且使用$(this)访问特定于单击元素所需的内容，您可以通过删除对 JS 中循环变量的所有引用来执行此操作，只需更改选择器。我看到两个选项，这两个选项都应该有效：

1(制作一个适用于所有以update_开头的ID：

$("[id^=update_]").click(function(){...})

2((可能更简单，我建议(用类替换各种 ID：

.HTML-

<a class="col-xs-1 text-info" data-id="{{job_title.id}}" data-title="{{job_title.title}}" class="update" href="#" data-toggle="modal" data-target="#UpdateModal">

.JS-

$(".update").click(function(){...})