单独编辑对象的属性，需要“编辑”框为每个属性动态打开

Question

后端是带有 Django 模型的 Python。以下是我在用户界面中的内容。当用户单击“编辑”笔时，我希望文本框输入显示在先前值的正下方，同时在页面顶部弹出一个“提交更改”按钮。用户需要能够根据需要编辑尽可能多的属性，然后一次提交所有更改。我的对象有超过 75 个属性，所以如果我为每个属性创建一个独特的函数，javascript 将变得非常冗长和麻烦。到目前为止我有这个：HTML:<button id="edit_submit" type="submit" form="job_text_edit">Commit Changes</button><form id="job_text_edit" action="pass to backend"></form><table class="z-depth-3"> <tr>  <td style="width: 200px">Job Name:</td>  <td>     {{job.job_name}}<a href="#"><i class="tiny material-icons" onclick="jobEdit()">edit</i></a>     <input id="job_name_i" name="job_name_i" type="text" form="job_text_edit">  </td>  </tr>  <tr>   <td>Work Schedule:</td>   <td>     {{job.work_schedule}}<a><i class="tiny material-icons" onclick="jobEdit()">edit</i></a>    <input id="work_schedule_i" name="work_schedule_i" type="text" form="job_text_edit">    </td>  </tr></table>javascript:<script> $(document).ready(function(){    $('#edit_submit').hide();    $('#job_name_i').hide();    $('#work_schedule_i').hide();  })  function jobEdit(){    $('#edit_submit').show();    $('#job_name_i').show();    $('#work_schedule_i').show();      }</script>问题是当你点击任何“编辑”笔时，所有的编辑框都会弹出。有没有办法让函数知道单击了哪个，以便我可以在函数中实现条件语句以仅显示必要的框？我尝试传入一个带有输入 ID 的字符串，但该函数在给定字符串参数时会抛出错误。任何帮助是极大的赞赏！

Answer 1

当您从后端提取数据时，您还需要提取一个 id 或一些唯一值。

该值对于您在上面的屏幕截图中显示的每个单独行或该行中的元素都是唯一的。

然后当你呈现你的 html 时，将 id（唯一值）附加到当前 id（元素上的 html id）的末尾

因此，例如，在您输入 id="job_name_i" 的地方，您可以在渲染时将唯一值 (id) 添加（附加）到它的末尾。

然后，您可以不用在 onclick 中传递函数调用（并在 html 中定义 onClick），而是可以在 javascript 的 init 部分设置一个事件侦听器，如下所示：

$("[id^=job_name_i]").on('click', event => {

  const clickedElement = $(event.target);

});

上面的代码将侦听对以 job_name_i 开头的任何元素的点击（请记住，您的唯一值将附加到它的末尾。

所以上面的内容会放在下面的块中。

$(document).ready(function(){

});

您现在可以访问页面上的特定单击元素，根据需要执行操作，在其下方或上方添加内容。因此，您可以使用 event.target.id 访问 ID，并将其传递给您的函数。

像下面这样的东西。

  function jobEdit(id){

    $(id).show(); 

    // OR

    $(someelement + id).show(); 

  }