php - 单击时使用 PHP 生成的表行的 ID 更新 AJAX 请求变量

Question

我可能忽略了一些非常明显的事情，但此时我投降并需要帮助。

这是我的情况。当我的页面加载时，PHP 在 while 循环中生成一个包含来 self 的服务器的数据的表。每个表格行都有一个姓名列、电话等。其中一列是一个图标，单击该图标后，用户可以查看带有有关该特定线索的注释的弹出窗口。简单的事情。

每行中的图标具有相同的类名，并且它们的 ID 是唯一的。

我有一个 AJAX 请求，应该从服务器提取笔记数据，并在用户单击相关图标时将其显示在弹出窗口中。我正在尝试使用 $('.class').click(this).attr('id');在我的 AJAX 请求中设置一个带有需要提交到我的 PHP 脚本的 id 的变量。

问题:AJAX 请求和返回似乎工作正常，但无论我单击哪一行图标，它都只显示属于第一行的数据，或者属于类名“homelead”的第一个实例示例:I单击第 1 行图标，我会看到一个弹出窗口，其中包含第 1 行的注释，太棒了!我单击任何其他行，它只显示第一行数据，:(。我已经通过简单的单击确认与每个行图​​标关联的 ID 是正确的。(this).(id) 并提醒属于行图标。一切都正确，只是似乎无法使用正确的 ID 更新 JS 变量。

我很困惑这是为什么。任何帮助，将不胜感激。这是我当前的代码。

HTML:

 <td>
       <img class="homelead" id="<?php echo $leadsfetch['unit_id'];?>"  
           onclick="ajax_unitnotes();" src="images/list-view.png">
  </td>
  <?php echo "</tr>"; } ?>

AJAX 请求:

function ajax_unitnotes(){

    var hr = new XMLHttpRequest();
    var url = "PHP/getnotes.php";

   // this variable should update with clicked rows id before      submitting to PHP script
    var unitidnotes = $('.homelead').click(this).attr('id');     

    var vars = "unitidnotes="+unitidnotes;
    hr.open("POST", url, true);
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    hr.onreadystatechange = function() {
        if(hr.readyState == 4 && hr.status == 200) {
            var return_data = hr.responseText;
            document.getElementById("unitnotes").innerHTML = return_data;
        }
    }
    hr.send(vars); 
    document.getElementById("unitnotes").innerHTML = "processing...";
}

Answer 1

当您在标签本身中使用 onclick 触发器时，这在使用 jQuery 时通常不常见。你可以这样做:

 <img class="homelead" id="<?php echo $leadsfetch['unit_id'];?>"  
           onclick="ajax_unitnotes($(this));" src="images/list-view.png">

在你的函数中

function ajax_unitnotes(e){

    var unitidnotes = e.attr('id');
}

您当前的代码

var unitidnotes = $('.homelead').click(this).attr('id'); 

实际上不知道您尝试访问的 this 对象是什么。

更好的是，您可以使用 jQuery 事件，从 img 标记中删除 onclick 并创建如下事件:

$('.homelead').click(function(){
    id = $(this).attr('id');
});