时间戳

首页 > 解决方案 > 在传递一些变量参数时，我如何正确使用 onclick() 方法，即在这种情况下的参数是 Mongoose 对象文档的 ID？

javascript - 在传递一些变量参数时，我如何正确使用 onclick() 方法，即在这种情况下的参数是 Mongoose 对象文档的 ID？

问题描述

因此，我根据从我编写的 node.js API 获得的数组，动态地将行附加到前端的表中。该数组表示学生。对于每一行，我附加并显示Name、Class、Roll_No和一个动态按钮，其颜色会根据我从该特定学生那里获得的值而变化。现在对于该按钮，我使用以下标签：

$('#users').append("<tr><td>" + (i + 1) + "</td><td>" + val.first_name + " " + val.last_name + "</td><td>" + val.roll_no + "</td><td>" + val.class + "</td><td><button id='tempButton' class='btn btn-danger' onclick='add_remove_student(" + val._id + ", " + val.is_linked + ")'>DELETE</button></td></tr>");

val表示students数组的当前元素，是一个mongoose对象。add_remove_student()现在，每当我单击附加按钮并且未调用该方法时，我都会收到错误消息。错误说：

未捕获的 SyntaxError：无效或意外的令牌

val._id是该特定 Mongoose 对象的 Mongoose ID，并且val.is_linked是一个布尔值。

在onclick()我切换到 node.js 之前，按钮中的标签起作用了

我已经多次挠头了，我做错了什么。任何帮助将不胜感激！

标签： javascriptjquerynode.jsmongodb

解决方案

简短的回答：不要使用onclick，或任何其他onX内联事件属性。它们已经过时，导致意大利面条代码并且不遵循关注点分离原则。

实现这一点的更好方法是将相关元数据作为data属性添加到元素中。然后，使用单个委托事件处理程序，您可以从被单击的元素中读取该元数据。试试这个：

let i = 0;
let val = {
  _id: "5e4780d3cfbe57182499506a",
  role: ["STUDENT"],
  is_active: true,
  linked_students: [],
  first_name: "test_fname",
  last_name: "test_lname",
  email: "t1@t.com",
  roll_no: "537",
  class: 7,
  description: "im a test user mate!",
  created_at: "2020-02-15T05:25:39.077Z",
  updatedAt: "2020-02-15T05:25:39.077Z",
  v: 0,
  is_linked: true
}

$('button').on('click', function() {
  $('#users').append(`<tr><td>${(++i)}</td><td>${val.first_name} ${val.last_name}</td><td>${val.roll_no}</td><td>${val.class}</td><td><button class="delete btn btn-danger" data-id="${val._id}" data-linked="${val.is_linked}">DELETE</button></td></tr>`);
});

$('#users').on('click', '.delete', function() {
  let $btn = $(this);
  let id = $btn.data('id');
  let isLinked = $btn.data('linked');
  console.log(id, isLinked);

  // do something with the above data...

  $(this).closest('tr').remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Append</button>
<table id="users"></table>

作为旁注，不要id在内容中使用将动态重复的属性。id需要在 DOM 中是唯一的。改为使用class属性。

如果出于某种原因，您绝对必须使用内联事件属性，则需要修复引号以使其匹配，并且您还需要转义在onclick值中使用的引号，以免它们干扰外部字符串：

$('#users').append('<tr><td>' + (i + 1) + '</td><td>' + val.first_name + ' ' + val.last_name + '</td><td>' + val.roll_no + '</td><td>' + val.class + '</td><td><button id="tempButton" class="btn btn-danger" onclick="add_remove_student(\"' + val._id + '\", \"' + val.is_linked + '\")">DELETE</button></td></tr>');

推荐阅读