从表单提交 Javascript/Django 中提取 ID 的更好方法

Question

目前我编写的代码可行，但看起来相当粗糙。基本上这就是我所拥有的（简化）：

JQuery 准备好了：

<script type="text/javascript">

    $(document).ready(function() {
        $('div.partDelete').click(function() {

        // TODO this seems like a dirty hack
        var split = this.id.split('_');
        if(split.length == 3) {
            $('#part_id').val(split[0]);
            alert($('#part_id').val());
            $('#removePartForm').submit();
        } else {
            alert('There was a problem removing the selected part');
        }
    });

</script>

我使用的表格：

<form id="removePartForm" action="{% url remove_part %}" method="post">
    <input type="hidden" id="part_id" name="part_id" value="-1" />

    {% for part in current_build.parts.all %}
        <div id="{{ part.id }}_part_id" class="partDelete">remove</div>
    {% endfor %} 
</form>

我要做的就是设置隐藏输入以获取用户选择的 part.id，以便我可以在我的视图中使用它。

据我所知，这是解决此问题的正确方法，但我只是感觉不是。我是 Django 和 JQuery 的新手，所以可能有一些我还没有找到的内置功能。

感谢您提出的任何建议！

解决方案（见下面 mikaelb 的回答）

Javascript：

$('div.partDelete').click(function() {
    var selected_id =$(this).data("id");
    $('#part_id').val(selected_id);
    $('#removePartForm').submit();
});

HTML 更改：

<div class="partDelete" data-id="{{ part.id }}">remove</div>

Answer 1

首先； ID 不应以数字开头 (http://www.w3.org/TR/html4/types.html#type-name)。

除此之外，您通常会使用 data-* 属性来设置 ID，以便从服务器端与 JS 进行通信。 data-* 属性可以是任何你想要的。所以 data-foo="" 是一个有效的属性。

示例：
HTML：

<div class="item" data-id="{{ part.id }}">
    <p>Foo</p>
</div>

Javascript：

$(function () { // same as document read

    $(".button-class").on("click", function () {
        // Here "this" will be the element
        var id = $(this).data("id"); // same as getting attribute data-id
        // Could also use $(this).attr("data-id")
    });
});

希望这会有所帮助。

编辑：移动注释以使其更清晰，更改示例以更具体地针对 OP 的问题。