post（）中的jQuery函数不选择父函数的元素

Question

I have a javascript function, which should hide a user post on call, and then should change the button to call the function doing the opposite (unhide) and display a corresponding changed text.

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();
}

The post request gets send, the .php then sends a query request and returns 1 or 0, depending on success. Then it should change the html with AJAX. First I tried this a selector, which selected the .php, so I gave the html element a temporary id (this.id="tempID";) which works, but the selector inside the function ("#tempID") can't find the element.

What is it trying to select then? And how can I get it to select in the original document?

Orig html (php), as requested:

function displayPost($entry, $class = "entry1"){
  $userid = $entry['userid'];
  $username = getUserName($userid);
  $created_at = DateTime::createFromFormat('Y-m-d H:i:s', $entry['created_at']);
  echo "<div class=\"".$class."\" onclick=\"postById(".$entry['id'].")\"><p class=\"info\">Posted by <a class=\"userlink\" onclick=\"userById(".$userid.")\">".$username."</a> on ".$created_at->format('j.n.Y')." at ".$created_at->format('H:i')."</p>";
  echo "<h2 class=\"title\">".$entry['title']."</h2>";
  echo $entry['content'];
  if(isset($_SESSION['userid']) && $entry['userid'] == $_SESSION['userid']){
    echo "<br><p class=\"info\">&nbsp;&nbsp;<a class=\"actionlink\" onclick=\"editPost(".$entry['id'].")\"><i class=\"far fa-edit\"></i>&nbsp;Edit</a></p>";
    echo "<p class=\"info\">&nbsp;&nbsp;<a class=\"actionlink\" onclick=\"deletePost(".$entry['id'].")\"><i class=\"far fa-trash-alt\"></i>&nbsp;Delete</a></p>";
    if(isset($entry['visible']) && $entry['visible'] == true){
      echo "<p class=\"info\">&nbsp;&nbsp;<a class=\"actionlink\" onclick=\"hidePost(".$entry['id'].")\"><i class=\"far fa-eye-slash\"></i>&nbsp;Hide</a></p>";
    } else {
      echo "<p class=\"info\">&nbsp;&nbsp;<a class=\"actionlink\" onclick=\"unhidePost(".$entry['id'].")\"><i class=\"far fa-eye\"></i>&nbsp;Unhide</a></p>";
    }
  }
  echo "</div>";
};

Answer 1

Okay having taken a look at your code, I can see the issue you are having.

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>';
}

Having changed your code slightly, it would appear that nowhere do you set an ID within your parent HTML you wish to change. Therefore the jQuery selector looking for an ID "tempID" cannot be found.

I would change the PHP code to:

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>';
}

And then change the jQuery code to:

$("#post-"+postid).html("<a class=\"fas fa-eye-slash\"></i>&nbsp;Hide");
$("#post-"+postid).attr("onclick", "hidePost(" + postid + ")");

That should work much better than it is currently.