javascript - 如何处理元素 onclick 属性中的 3 个引号

Question

我有一个小问题:在我的项目中，我尝试制作一个“like”按钮，并通过onclick探针定义了一个附加到函数的按钮。但现在看起来像这样:

<div class="post-container">
    <button class="{% if post.liked %}color-blue{% else %}color-white{% endif %}" id="post_{{ post.id|stringformat:'s' }}" onclick="postLike('{{ post.id|stringformat:'s' }}')"> {{ number_of_likes }} Like{{ number_of_likes|pluralize }}</button>
</div>

Visual Studio Code 将此标记为红色，我不太确定如何处理这些问题，因为当我按下按钮时，我在控制台中的 onclick 上收到错误...

Answer 1

像您当前使用的内联处理程序通常被认为是糟糕的做法，其原因之一是因为它们在传递字符串参数时存在非常难看的引号转义问题。 (它们还需要全局污染，并且有一个疯狂的范围链。)

将帖子 ID 放入数据属性中，并将监听器附加到其他位置的独立 JavaScript 中的每个元素。例如，如果您从

开始

<button class="myButton" onclick="postLike('{{ post.id|stringformat:'s' }}')">

更改为

<button class="myButton" data-post-id="{{ post.id|stringformat:'s' }}">

并在单击时从按钮检索帖子 ID。当 HTML 包含所有按钮后，运行以下 JS:

for (const button of document.querySelectorAll('.myButton')) {
  button.addEventListener('click', (e) => {
    postLike(e.target.dataset.postId);
  });
}

您必须根据按钮周围的 HTML 标记来调整选择器字符串 .myButton。

另一个选项，在所有按钮的容器上使用事件委托(delegate):

container.addEventListener('click', (e) => {
  if (e.target.dataset.postId) {
    postLike(e.target.dataset.postId);
  }
});