我有一个javascript函数,该函数应该隐藏通话中的用户帖子,然后应该更改按钮以相反的方式(取消隐藏)调用该函数并显示相应的更改的文本。
function unhidePost(postid) {
if( called ) return false;
called = true;
this.id="tempID";
$.post("../scripts/requests.php", {
visiblePost: 1,
postId: postid,
}, function(success){
if (success) {
$("#tempID").html("<i class=\"fas fa-eye-slash\"></i> Hide");
$("#tempID").attr("onclick", "hidePost(" + postid + ")");
}
});
reload();
}
发布请求被发送,.php
然后发送查询请求并返回1或0(取决于成功)。然后,应使用AJAX更改html。首先,我尝试了this
一个选择器,该选择器选择了.php
,所以我给html元素一个临时ID(this.id="tempID";
)起作用,但是函数内部的选择器({{1} })找不到元素。
然后尝试选择什么?以及如何在原始文档中进行选择?
原始html(php),根据要求:
"#tempID"
答案 0 :(得分:0)
我希望您在浏览器中了解EventLoop的概念,javascript是单线程的,为了使其异步,它使用EventLoop的概念。
首先,在您的代码中,有一个“ Post”,它要求php和您尝试从DOM访问某些元素的成功信息。
可能有两种可能性:
请在“ POST” AJAX完成/完成时使用回调,并编写类似于以下代码的功能。
var successObj;
$.ajax({
url: url,
dataType: 'json',
type: POST,
data: 'specify your input',
sucess:function(success){
successObj = success;
}
}).done(function() {
if(successObj) {
//YOUR CODE
}
});
答案 1 :(得分:0)
好了,看看您的代码,我可以看到您遇到的问题。
if(isset($entry['visible']) && $entry['visible'] == true)
{
print '<p class="info"> <a class="actionlink" onclick="hidePost('.$entry['id'].')"><i class="far fa-eye-slash"></i> Hide</a></p>';
}
else
{
print '<p class="info"> <a class="actionlink" onclick="unhidePost('.$entry['id'].')"><i class="far fa-eye"></i> Unhide</a></p>';
}
稍稍更改了代码后,您似乎没有在希望更改的父HTML内的任何地方设置ID。因此找不到用于查找ID“ tempID”的jQuery选择器。
我将PHP代码更改为:
if(isset($entry['visible']) && $entry['visible'] == true)
{
print '<p class="info"> <a id="post-'.$entry['id'].'" class="actionlink" onclick="hidePost('.$entry['id'].')"><i class="far fa-eye-slash"></i> Hide</a></p>';
}
else
{
print '<p class="info"> <a id="post-'.$entry['id'].'" class="actionlink" onclick="unhidePost('.$entry['id'].')"><i class="far fa-eye"></i> Unhide</a></p>';
}
然后将jQuery代码更改为:
$("#post-"+postid).html("<a class=\"fas fa-eye-slash\"></i> Hide");
$("#post-"+postid).attr("onclick", "hidePost(" + postid + ")");
那应该比现在好得多。
答案 2 :(得分:0)
或者,您可以将jQuery(尽管我没有尝试过)简单地更改为:
function unhidePost(postid) {
if( called ) return false;
called = true;
$.post("../scripts/requests.php", {
visiblePost: 1,
postId: postid,
}, function(success){
if (success) {
$(this).html("<i class=\"fas fa-eye-slash\"></i> Hide");
$(this).attr("onclick", "hidePost(" + postid + ")");
}
});
reload();
}