如何將列表 html 中的數據 ID 獲取到 django 模板中的 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(){...})