AJAX 针对单个锚元素答案

【问题标题】：AJAX Targeting individual anchor elementsAJAX 针对单个锚元素
【发布时间】：2023-04-03 11:24:01
【问题描述】：

我有一个 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，我可以设想这种工作方式，该列 ID 将被动态分配，如下所示：

<td id=$postID>

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

【问题讨论】：

您可以使用 ROW <tr id="<?=$postID?>"> 的唯一 ID 并在 TD 内设置类，例如 <td class="fieldName">，然后通过 JQuery 获取/设置每个值，例如：$("#postID.fieldName").innerHTML 或 $("#postID.fieldName").innerText if你只想要文字

标签： javascript php jquery

【解决方案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();
      });
    /*});*/
  });
});

【讨论】：

没错，只是想确保 OP 知道如果他们试图将它们用于其他用途，它们必须是独一无二的。
修复了使用相同 id 的部分，感谢 @JayBlanchard

【解决方案2】：

您需要在您的 div 中添加唯一编号 id 说 $ticketID

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

在你的 JQuery 中

$(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'+event.target.id).appendChild(ticket);
});
$(document).ready(function(){
  $("button").click(function(){
    $('p').hide();
  });
});
});
});

希望对你有帮助！

【讨论】：