Question

我在从数据库中删除内容后尝试.fadeOut() div。此div及其内容echo来自PHP。

以下是echo php代码

echo '<form action="deletepost.php" method="post" enctype="nultipart/form-data">
  <div class="postSlate">
    <input style="display: none" type="submit" name="deletepost" id="deletepost" value="Delete">
    <label for="deletepost"><i class="typcn typcn-delete clsup2"></i></label>
    <input type="text" style="display: none" name="reqid" id="reqid" value="'.$req_id.'">
</form>
<ul class="slateDetails">
  <a href="userprofile.php?userid='.$post_id.'">
    <li><img class="exdetails" src="'.$profimages.'"></li>
    <li>'.$cname.'</li>
  </a>
</ul>
<div class="slateImg"><img src="'.$commodityimg.'"></div>
<div class="slateTitle extitle">
  <p>'.$req_title.'</p>
</div>
<div class="slateBrief">
  <p>'.$req_brief.'</p>
</div>
<div class="slateBtn">  </div>
</div>'

我使用AJAX来执行deletepost.php。以下是ajax代码

$("#deletepost").click(function() {
      //e.preventDefault();
      reqid=$("#reqid").val();
      //userid=$("#userid").val();
      $.ajax({
        type: "POST",
        url: "deletepost.php",
        data: "reqid="+reqid,
        success: function(html){
          if (html == 'true')
          {
              alert("Post Deleted");
              $('#deletepost').find('.postSlate').fadeOut();
          }
          else
          {
              alert("nothing");

          }
          //if (html == 'false')
          //{
            //  $(".logresult").html('<div class="loginDanger"><i class="fa fa-exclamation-triangle"></i>   There was an error upgrading this account!. Please try again later.</div>');
          //}
        },
        beforeSend:function()
        {
          $(".logresult").html("<img src='images/ring.gif'>");
        }
      });
      return false;
    });

从代码中您看到我尝试使用.find()功能.fadeOut() div携带该特定帖子，但这不起作用，但帖子已从数据库中删除所以这不是PHP问题。请问这是什么解决方案？

Answer 1

find方法会尝试在上下文中找到内部选项。在您的情况下，$("#deletepost")选择器将返回标识为deletepost的输入元素的jQuery元素，并且它没有任何内部内容。 postSlate是deletepost的父容器div。所以使用任何可以让你获得外部容器的方法。

以下是使用closest方法的方法。

$('#deletepost').closest('div.postSlate').fadeOut();

另一种选择是parent方法。但是当你完全确定该项目是你的直接父母时，请使用父母。 closest()会向外移动，直到找到匹配为止。

此外，请确保每个元素没有唯一ID 。如果您在循环中呈现多个帖子，则可以使用css选择器连接click事件并使用相对选择器方法（如closest和find根据需要）

Answer 2

由于id属性在同一文档中应该是唯一的，因此请尝试按公共类更改重复的属性，因此#deletepost应为.deletepost：

<input style="display: none" type="submit" name="deletepost" id="deletepost" value="Delete">

将是：

<input style="display: none" type="submit" name="deletepost" class="deletepost" value="Delete">

应改为parent：

$('#deletepost').parent('.postSlate').fadeOut();

因此，您的选择器会转到父级，因为#deletepost是.postSlate的孩子。

用ajax删除帖子后FadeOut整个div

2 个答案: