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

Question

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

我还有其他问题，“30s”中是 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演示