时间戳

首页 > 解决方案 > 将对象传递给函数

javascript - 将对象传递给函数

问题描述

我有一组<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是一个对象列表。

标签： javascriptjqueryhtml

解决方案

要实现这一点，您可以将对象存储在您创建的data每个对象的 jQuery 缓存中。span然后，您可以使用不显眼的委托事件处理程序在单击元素时再次读取它们。尝试这个：

var lstQuestions = [
  { label: 'foo' }, 
  { label: 'bar' }, 
  { label: 'fizz' }, 
  { label: 'buzz' }
];

var spans = lstQuestions.map(function(o) {
  return $('<span />', {
    'class': 'badge',
    'text': o.label
  }).data('question', o);  
})

$('#questions').on('click', '.badge', function() {
  var obj = $(this).data('question');
  console.log(obj);
}).append(spans);
span {
  padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="questions"></div>

另一种选择是将数组的相关对象的索引存储在 data 属性中，然后在单击元素时使用它从数组中检索项目。两者都有优势，这取决于您的用例，哪个更合适。

推荐阅读