Question

如何动态创建<p>标记并在单击时将其分配给var，它应该转到函数goTo并知道<p>我点击了，以便访问数组lastGoals的索引。

我有其他问题，在30秒内是30这个我更新这个功能，当我点击它时多次调用该功能我用这个功能更新了。我知道i不在$(document).on();的范围内，还有其他问题，因为如果我放入for内部，我认为这将是一个不好的方式添加点击。

var isFirstTime = true;
var text = '<p class="boxLastGoals">test</p>';
var size = lastGoals.length;
for (var i = 0; i < size; i++) {
   if (isFirstTime) {
   $('#listLastGoals').html(text);
      isFirstTime = false;
    } else {
       $('#listLastGoals').append(text);
    }
}

$(document).on('click', 'p.boxLastGoals', goTo(event, i));

Answer 1

假设您对使用JQuery感到满意，可以使用JQuery在循环内为您创建<p>元素，并在其中动态附加单击处理程序。您还可以使用.prop('value', 'test');方法将数据附加到元素，以便可以在单击处理程序（如$(this).prop('value');）内访问它。

我已更新我的示例以包含循环并访问变量以匹配您的方案

示例

HTML 的

<div id="content"> </div>

的JavaScript

$(document).ready(function() { var list = ['goal 1', 'goal 2', 'goal 3', 'goal 4', 'goal 5']; for (var i = 0; i < list.length; i++) { var text = list[i]; var pEl = $('<p></p>', { text: text }); pEl.prop('arrayIndex', i); pEl.on('click', function(e) { goToGoal(e, $(this).prop('arrayIndex')); }); $('#content').append(pEl); } }); function goToGoal(e, i) { alert('go to goal: ' + i); }

JSFiddle演示

如何动态创建<p>标签并在单击时将其分配给var？

1 个答案: