如何创建<p>标记，并在我单击它时将其分配给一个var

How do I create a <p> tag dynamically and assign it to a var when I click it?

本文关键字：分配 var 一个 单击 lt 创建 何创建 gt 标记      更新时间：2023-09-26

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

我还有其他问题，它是30在"30s"我做这个函数来更新，当我点击它时，我用这个函数更新了很多次。我知道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));

假设您对使用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演示

相关文章：