我有一组<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
是一个对象列表。
最佳答案
您说过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>
关于javascript - 将对象传递给函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55493717/