javascript - jquery - 在foreach循环后获取元素的html

Question

不知道该怎么做。我得到了使用 php 和 mysql 的项目列表。

我使用循环显示项目。然后使用 jquery click() 我想抓取显示项目名称的元素的 html，以便在其他地方使用该名称，但无论我单击哪个项目，我总是只获得循环的第一个项目。

这是代码:

<?php foreach ($projects as $project): ?>
  <li class="todo-projects-item" data-projectid="<?php echo $project->project_id ?>">
    <h3 id="p_name" data-proname="<?php echo $project->project_name ?>"><?php echo $project->project_name ?></h3>
    <p><?php echo $project->project_body ?></p>
    <div class="todo-project-item-foot">
       <p class="todo-red todo-inline">Project #<?php echo $project->project_id ?></p>
       <p class="todo-inline todo-float-r">32 Members
         <a class="todo-add-button" href="#todo-members-modal" data-toggle="modal">+</a>
       </p>
     </div>
  </li>
  <div class="todo-projects-divider"></div>
<?php endforeach; ?>

它给了我以下内容:

我在我的脚本中使用它的点击功能:

pName = $('#p_name').data('proname');
alert(pName);

无论我点击哪个项目，它总是会提醒“项目”，这是我数组中的第一个......我做错了什么？

Answer 1

点击处理程序位于哪个元素上？

问题是您正在使用 $('#p_name') ，但实际上页面上有许多具有相同 ID 的元素。这实际上是一个很大的禁忌...元素 ID 应该始终是唯一的。

如果点击处理程序位于 <li>标签，这样的东西应该效果更好:

$('.todo-projects-item').click(function (e) {
    e.preventDefault();
    alert($(this).find('h3').data('proname'));
});