javascript - 将对象传递给函数

Question

我有一组<span>在 JavaScript 函数中动态创建的元素。每个<span>创建后，我希望可单击并调用一个函数，该函数将参数作为单击时的对象。

我的问题是当我传递对象时出现错误 undefined对于 objAddQuestion 。如何将对象传递给函数？

 for (var j = 0; j < lstQuestions.length; j++) {
    var objAddQuestion = new Object();
    objAddQuestion = lstQuestions[j];
    html += ' <span onclick="addQuestion(objAddQuestion)" class="badge addQ">' +
        ' Add</span>';
}

和函数:

function addQuestion(obj) {
    //I got error when click
}

lstQuestions是一个对象列表。

Answer 1

您说过lstQuestions是一个对象列表。这意味着您可能不想将问题嵌入到 onclick 属性处理程序中。

相反，我建议使用现代事件处理，而不是 onclick 属性。例如，我可能会通过在 span 上包含问题标识符，然后使用事件委托(delegate)处理事件来实现此目的。

注意:您已标记您的问题 jquery ，但是你的问题中没有明显的 jQuery，所以我没有在第一个解决方案中使用它。不过，你当然可以，而且委托(delegate)会更简单；请参见下面的水平线下方。

var lstQuestions = [
    {
        id: 1,
        text: "Question 1",
        details: "Details for question 1"
    },
    {
        id: 2,
        text: "Question 2",
        details: "Details for question 2"
    },
    {
        id: 3,
        text: "Question 3",
        details: "Details for question 3"
    }
];
var html = "";
for (var j = 0; j < lstQuestions.length; j++)
{
    // Include the question ID (or if the list never changes, just use `j`) as a data-* attribute
    var question = lstQuestions[j];
    html += ' <span data-question="' + lstQuestions[j].id + '" class="badge addQ">' +
        question.text +
        ' Add</span>';
}
document.getElementById("questions").innerHTML = html;

// Handle clicks on the container
document.getElementById("questions").addEventListener("click", function(e) {
    // Did the click pass through a span.addQ?
    var span = e.target.closest("span.addQ");
    if (span && this.contains(span)) {
        // Yes, get its ID
        var id = +span.getAttribute("data-question");
        // Find the question
        var question = lstQuestions.find(function(q) { return q.id === id; });
        if (question) {
            console.log("Question details: " + question.details);
        }
    }
});

<div id="questions"></div>

<小时/>

使用 jQuery，您可能会选择 Rory's approach使用 jQuery 的元素数据缓存。但上面的内容是使用 jQuery 而不是直接使用 DOM:

var lstQuestions = [
    {
        id: 1,
        text: "Question 1",
        details: "Details for question 1"
    },
    {
        id: 2,
        text: "Question 2",
        details: "Details for question 2"
    },
    {
        id: 3,
        text: "Question 3",
        details: "Details for question 3"
    }
];
var html = "";
for (var j = 0; j < lstQuestions.length; j++)
{
    // Include the question ID (or if the list never changes, just use `j`) as a data-* attribute
    var question = lstQuestions[j];
    html += ' <span data-question="' + lstQuestions[j].id + '" class="badge addQ">' +
        question.text +
        ' Add</span>';
}
$("#questions")
    .html(html)
    .on("click", "span.addQ", function() {
        // Yes, get its ID
        var id = +this.getAttribute("data-question");
        // Find the question
        var question = lstQuestions.find(function(q) { return q.id === id; });
        if (question) {
            console.log("Question details: " + question.details);
        }
    });

<div id="questions"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>