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; ?>

它给了我以下内容：

我在我的脚本中使用了click功能：

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

我点击什么项目并不重要，它始终提醒“项目”，我的阵列中的第一个......我做错了什么？

Answer 1

您应该使用$（this）来获取点击的元素。

$("h3").click(function() {
    var pName = $(this).data("proname");
    alert(pName);
});

并且，如果您将点击事件挂钩到h3的父级，则可以使用$(this).find("h3")来抓取它。

Answer 2

点击处理程序是什么元素？

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

如果点击处理程序位于<li>标记上，则此类内容应该更好：

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

Answer 3

页面中的一个ID应该只有一次。 #p_name只能使用一次。如果您需要多次使用它，请将其用作类.p_name，并在脚本中更改它：

<h3 class="p_name" data-proname="<?php echo $project->project_name ?>"><?php echo $project->project_name ?></h3>