时间戳

首页 > 解决方案 > 使用模板文字创建 HTML 时如何使用参数设置 onclick 侦听器？

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

问题描述

我正在做一个代码测验，并使用 map 函数遍历一组对象，每个对象都包含每个问题的标题、选项和答案。我使用模板文字使代码易于阅读。创建按钮时，map 函数中的键具有正确的值，但是，当我单击按钮时，它总是返回 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);

标签： javascriptjquerytemplate-literals

解决方案

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

onclick='console.log(2)'

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

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);
});

推荐阅读