post()中的jQuery函数未选择父函数的元素

时间:2019-04-12 08:27:28

标签: javascript php jquery

我有一个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>&nbsp;Hide");
      $("#tempID").attr("onclick", "hidePost(" + postid + ")");
    }
  });
  reload();
}

发布请求被发送,.php然后发送查询请求并返回1或0(取决于成功)。然后,应使用AJAX更改html。首先,我尝试了this一个选择器,该选择器选择了.php,所以我给html元素一个临时ID(this.id="tempID";)起作用,但是函数内部的选择器({{1} })找不到元素。

然后尝试选择什么?以及如何在原始文档中进行选择?

原始html(php),根据要求:

"#tempID"

3 个答案:

答案 0 :(得分:0)

我希望您在浏览器中了解EventLoop的概念,javascript是单线程的,为了使其异步,它使用EventLoop的概念。

首先,在您的代码中,有一个“ Post”,它要求php和您尝试从DOM访问某些元素的成功信息。

可能有两种可能性:

  1. DOM尚未完全加载。
  2. 元素在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">&nbsp;&nbsp;<a class="actionlink" onclick="hidePost('.$entry['id'].')"><i class="far fa-eye-slash"></i>&nbsp;Hide</a></p>';
}
else
{
    print '<p class="info">&nbsp;&nbsp;<a class="actionlink" onclick="unhidePost('.$entry['id'].')"><i class="far fa-eye"></i>&nbsp;Unhide</a></p>';
}

稍稍更改了代码后,您似乎没有在希望更改的父HTML内的任何地方设置ID。因此找不到用于查找ID“ tempID”的jQuery选择器。

我将PHP代码更改为:

if(isset($entry['visible']) && $entry['visible'] == true)
{
    print '<p class="info">&nbsp;&nbsp;<a id="post-'.$entry['id'].'" class="actionlink" onclick="hidePost('.$entry['id'].')"><i class="far fa-eye-slash"></i>&nbsp;Hide</a></p>';
}
else
{
    print '<p class="info">&nbsp;&nbsp;<a  id="post-'.$entry['id'].'" class="actionlink" onclick="unhidePost('.$entry['id'].')"><i class="far fa-eye"></i>&nbsp;Unhide</a></p>';
}

然后将jQuery代码更改为:

$("#post-"+postid).html("<a class=\"fas fa-eye-slash\"></i>&nbsp;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>&nbsp;Hide");
      $(this).attr("onclick", "hidePost(" + postid + ")");
    }
  });
  reload();
}