使用模板文字创建 HTML 时如何使用参数设置 onclick 侦听器？

Question

我正在做一个代码测验，并使用 map 函数遍历 objects 数组，每个数组都包含标题、选项和每个问题的答案。我使用了模板文字来使代码易于阅读。创建按钮时，地图函数中的键具有正确的值，但是，当我单击按钮时，它总是 returns 0。

function printIt(input){
console.log(input);
}

var question = `
    <div class='title'>
        <h1>${questions[cur].title}</h1>
        <p>${questions[cur].choices.map((item, i) => `
            <button class='answers' id='${i}' onclick='${printIt(i)}'>${item}</button><br />
        `).join('')}</p>
    </div>
`;

//put on page
$("#container").append(question);

Answer 1

虽然您可以通过确保 onclick 属性字符串包含函数来修复它，例如

onclick='console.log(2)'

内联处理程序被广泛认为是非常糟糕的做法，因为它们有很多范围问题和字符串转义问题。最好使用 Javascript 添加侦听器。在 #container 上使用事件委托 - 当单击其中的按钮时，检查按钮的 id，并用 id:

调用 printIt

var question = `
    <div class='title'>
        <h1>${questions[cur].title}</h1>
        <p>${questions[cur].choices.map((item, i) => `
            <button class='answers' id=${i}>${item}</button><br />
        `).join('')}</p>
    </div>
`;

//put on page
$("#container").append(question);
$("#container").on('click', 'button.answers', function() {
  printIt(this.id);
});

但是数字索引的 ID 也很有代码味道，在单个文档中有重复的 ID 是无效的 HTML。除非需要，否则您可以通过在单击时检查其父容器中被单击按钮的索引来完全避免 i 的需要：

var question = `
    <div class='title'>
        <h1>${questions[cur].title}</h1>
        <p>${questions[cur].choices.map((item) => `
            <button class='answers'>${item}</button><br />
        `).join('')}</p>
    </div>
`;

//put on page
$("#container").append(question);
$("#container").on('click', 'button.answers', function() {
  const index = [...this.parentElement.children].indexOf(this);
  printIt(index);
});

使用模板文字创建 HTML 时如何使用参数设置 onclick 侦听器？

How to set onclick listener with parameter when creating HTML with a template literal?

javascript

jquery

template-literals