我可能忽略了一些非常明显的事情,但在这一点上,我投降了,需要帮助。
这是我的情况。当我的页面加载时,在一个while循环中,PHP生成一个包含来自服务器的数据的表。每个表行都有一个姓名列、电话等。其中一列是一个图标,当点击它时,用户可以查看一个弹出的关于这个特定线索的注释。简单的东西。
每一行的图标有相同的类名,它们的ID是唯一的。
我有一个AJAX请求,应该从服务器拉笔记数据,并在弹出框中显示它,当用户单击相对图标。我试图使用$('.class').click(this).attr('id');在我的AJAX请求中设置一个变量,该变量的id需要提交给我的PHP脚本。
问题:AJAX请求和返回似乎工作得很好,但无论我点击哪一行图标,它只显示属于第一行的数据,或与类名"首页"的第一个实例示例:我点击第一行图标,我得到一个弹出与第一行的笔记,伟大!我单击任何其他行,它只显示第1行数据:()。我已经确认,与每个行图标相关联的ID是正确的,通过做一个简单的单击(this) (ID)并警告属于行图标的ID。一切都是正确的,只是似乎无法得到JS变量更新与正确的ID。
我很困惑为什么会这样。任何帮助都会很感激。这是我当前的代码。
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...";
}
当你在标签本身使用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');
});
可以将被点击的对象this
传递给由"onclick"触发的函数:
onclick="ajax_unitnotes(this);"
这将使你点击的DOM对象在JS函数中可用。
您需要相应地更改函数签名:
function ajax_unitnotes(clickedElement){
然后你可以修改这个
var unitidnotes = $('.homelead').click(this).attr('id');
var unitidnotes = clickedElement.id;
这将为您提供$leadsfetch['unit_id']
= img id的值。