javascript - AJAX 针对单个 anchor 元素

Question

我有一个 PHP 生成的项目表。每行都有一个链接，单击该链接后，应该会展开包含附加信息的行。

我尝试使用 JQuery 获取数据并返回它，这有效 - 但仅适用于第一行。每行中的每个链接仅将数据返回到第一行。这是因为该行有一个静态 ID，这正是我的目标。

我考虑过在 PHP 生成每一行时通过在其中放置一个变量来尝试分配一个动态 ID，但随后我需要让 JQuery 在单击链接时返回父 td 元素的 id，以便它定位该特定行，但我不知道该怎么做。

AJAX函数

$(document).ready(function() {
  $("a.test").click(function(event) {
    $.post("includes/modal.php", { id: event.target.id }, function(response) {
      var ticket = document.createElement("p");
      ticket.innerText = response;
      document.getElementById('myDiv').appendChild(ticket);
    });
    $(document).ready(function(){
      $("button").click(function(){
        $('p').hide();
      });
    });
  });
});

PHP 生成的行和列

echo "
  <tr>
    <td>$dateChange</td>
    <td>$ticketSubject</td>
    <td id='myDiv'>
      <a class='test' type='button' href='#' id=$ticketID>
         View Ticket
      </a>
      <button>Hide</button>
    </td>
    <td>$ticketState</td>
  </tr>";

我希望用户单击每行上的链接，并使用 JQuery 返回的新数据展开该行。

如果 getElementById() 部分能够以某种方式提取适当的列 ID(将动态分配)，我可以想象这种工作方式，如下所示:

<td id=$postID>  

我不知道这是否是解决此问题的最佳方法，但这是我目前的想法。我不知道有任何 JQuery 方法可以针对每个单击的唯一实例。

Answer 1

将您的标记修改为:

echo "
  <tr>
    <td>$dateChange</td>
    <td>$ticketSubject</td>
    <td>
      <a class='test' type='button' href='includes/modal.php?id=$ticketID'>
         View Ticket
      </a>
      <button>Hide</button>
    </td>
    <td>$ticketState</td>
  </tr>";

在这里，我添加 href 属性以及所需页面的链接。此外，我还删除了 id='myDiv'，因为页面上的 id 必须是唯一的。

在 javascript 中，您只需对此 href 执行 POST 请求:

$(document).ready(function() {
  $("a.test").click(function(event) {
    // $(this) gives you the clicked element as jQuery object
    $.post($(this).attr('href'), function(response) {
      // according to your markup you can do:
      $(this).parent().append('<p>' + response + '</p>');
      // Instead of these lines below
      /*var ticket = document.createElement("p");
      ticket.innerText = response;
      document.getElementById('myDiv').appendChild(ticket);*/
    });
    // return false to prevent default action on `a` click
    return false;

    // I don't know what you expect when put `ready` into `ready`
    /*$(document).ready(function(){*/
      $("button").click(function(){
        $('p').hide();
      });
    /*});*/
  });
});