php - 访问html中的mysql值通过jquery发送到php文件

Question

我想获取id的值，以便根据id号删除mysql中的数据

这是一个事件项目，这里的主要思想是我想根据单击的按钮获取事件的id号，以便我可以根据id号更新/删除事件。

显示详细信息的代码

  <?php $sql= "SELECT event_name, event_date, event_id FROM events WHERE event_status=0";
  $result= mysqli_query($conn, $sql);?>

  while($row = mysqli_fetch_assoc($result))
{
   echo ' 

      <div class="pending-card">

        <div class="pending-image">

        </div>';

     echo "  <div class='pending-title'>
          <h1>{$row["event_name"]}</h1>
        </div>";

       echo " <div class='pending-des'>
          <p>{$row["event_date"]}</p>
          <button class='choice-pending'><a href='detail.php'>Read More...</a></button>
          <input style='display: none;' type='text' id='test-pend' value='{$row["event_id"]}'>
        </div>

      </div>
    ";
}

Jquery代码

这里我尝试通过发出警报来检查这是否有效，但是在我按下按钮后，出现的 ID 号与我点击的按钮不对应

$(document).ready(function(){

$('.choice-pending').click(function(){
    alert("Value: " +  $('#test-pend').val());

});
});

谁能告诉我哪里出了问题

例如，我按下的事件应该是 34，但警报显示 26，这是用于显示详细信息的代码中的第一个事件 id

Answer 1

您可以在元素中使用data-* 属性。

基于 https://www.w3schools.com/tags/att_global_data.asp

The data-* attributes is used to store custom data private to the page or application.

The data-* attributes gives us the ability to embed custom data attributes on all HTML elements.

The stored (custom) data can then be used in the page's JavaScript to create a more engaging user experience (without any Ajax calls or server-side database queries).

The data-* attributes consist of two parts:

The attribute name should not contain any uppercase letters, and must be at least one character long after the prefix "data-" The attribute value can be any string Note: Custom attributes prefixed with "data-" will be completely ignored by the user agent.

<button class="choice-pending" data-event-id="<?= $row['event_id']; ?>">Read More...</button>

然后在您的脚本中您可以访问单击的按钮:

$(".choice-pending").click(function() {
    if($(this).attr('data-event-id') !== undefined) {
        // You can do ajax call here to your detail.php

        // Or you can simply create a hidden field inside your form, assigned the data-event-id value to it, then $("form").submit(); 

    } else {
        /** Error message here, maybe? */

    }

});