Question

我有一个while循环，现在我正在获取用户朋友的帖子，我有一个react列，用户可以在其中选择他的反应表情符号，并且当我单击任何反应时，我想用class react2隐藏div我现在无法选择作为单击输入类型的react2的父div。这是我的代码：

<div class="float2">
  <div class="react2" id="react2" data-rowid="<?php echo $pixid?>"><?php
$query2 = "SELECT * FROM gormint where post_id = $pixid and user_id= $id3";
$fire2 = mysqli_query($con,$query2) or die("can not fetch data from database ".mysqli_error($con));
$query3 = "SELECT * FROM bhai where post_id = $pixid and user_id= $id3";
$fire3 = mysqli_query($con,$query3) or die("can not fetch data from database ".mysqli_error($con));
$query4 = "SELECT * FROM famer where post_id = $pixid and user_id= $id3";
$fire4 = mysqli_query($con,$query4) or die("can not fetch data from database ".mysqli_error($con));
$query5 = "SELECT * FROM muskan where post_id = $pixid and user_id= $id3";
$fire5 = mysqli_query($con,$query5) or die("can not fetch data from database ".mysqli_error($con));
if (mysqli_num_rows($fire2)>0) {
  echo "<img src='gormint.jpg' class='gormint2' style='width:30px; height:30px;'  >";
}elseif (mysqli_num_rows($fire3)>0) {
  echo "<img src='bhai.jpg' class='bhai2' style='width:30px; height:30px;'>";
}elseif (mysqli_num_rows($fire4)>0) {
  echo "<img src='famer.jpg' class='bhai2' style='width:30px; height:30px;'>";
}elseif (mysqli_num_rows($fire5)>0) {
  echo "<img src='bancho.jpg' class='bhai2' style='width:30px; height:30px;'>";
} else{
  echo "<img src='wink.png' class='wink2' style='width:30px; height:30px;'>";
}?>
</div>

<div class="flipClass" style="display: flex;" data-rowid="<?php echo $pixid?>" id="flip">react</div>


<div class="panelClass" style="" id="panel" data-rowid="<?php echo $pixid?>"> 
  <input type="image" onclick="PlaySound2()" id="display" data-value="<?php echo $users['id'];?>"  src="gormint2.jpg" class="close2 display gormint animated bounceIn " >


              </div>

              </div>

这是我的脚本：

$(document).on('click','.display',function(){


    var value=$(this).attr('data-value');
    $panelClass = $(this).parent().parent().parent().attr('id');
    $.ajax({url:"reaction.php?pollid="+value,cache:false,
      success:function(){

       $panelClass.fadeOut();

    }});
});

现在，当我单击“反应”按钮时，react2 div不会淡出我在做什么错了吗？

Answer 1

不起作用的原因是您获得了ID。因此，您基本上是在尝试这样做（假设parent().parent()有用）

$panelClass = $(this).parent().parent().parent().attr('id');
//$panelClass = 'react2'
$.ajax({url:"reaction.php?pollid="+value,cache:false,
  success:function(){

   $panelClass.fadeOut();
  // or "react2".fadeOut();

}});

在英语中，.attr('id')返回一个字符串，然后在其上调用淡出。基本上，您在字符串而不是Dom元素上调用fadeOut()，并且字符串没有该函数的概念。假设您的事件处理程序甚至触发了（见下文）。

例如（不正确）

$('input[name="test"]').click(function(){
      
       //this is a string (the ID) nothing to do with a class
      $panelClass = $(this).parent().parent().parent().attr('id');

      //throws JS error
      $panelClass.fadeOut();
      
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="react2" id="react2" >
  <div>
     <div>
          <input type="button" name="test" value="click here" >
     </div>
  </div>
</div>

如果您必须保留parent()...的内容，请删除attr调用或包装生成的ID $('#'+$panelClass).fadeOut();，除了进行其他DOM查找外，它看起来还很糟糕。

例如（正确）

$('input[name="test"]').click(function(){
      
       //this is a string (the ID) nothing to do with a class
      $panelClass = $(this).parent().parent().parent(); //no attr call

      //throws JS error
      $panelClass.fadeOut();
      
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="react2" id="react2" >
  <div>
     <div>
          <input type="button" name="test" value="click here" >
     </div>
  </div>
</div>

老实说，我不知道这样做$(this).closest('.react2').fadeOut();有什么问题。

例如（最好，如果添加另一个嵌套的div，则不会刹车）：

$('input[name="test"]').click(function(){          
      $(this).closest('.react2').fadeOut();        
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="react2" id="react2" >
  <div>
     <div>
          <input type="button" name="test" value="click here" >
     </div>
  </div>
</div>

使用最接近的代码更简洁（代码更少），更具体，如果恰好需要另一个元素来包装输入，它也不会中断。如果添加另一个包装元素，例如{{1}，则使用parent。 }，您必须在其中添加另一个<label>呼叫。

除了当前问题之外的其他事情

1 我什至不确定您的事件处理程序是否已触发，因为您已将其分配给一个类，并且在DoM中有一个ID。

parent()

应该是：

<input type="image" onclick="PlaySound2()" id="display" .. //this is an id
$(document).on('click','.display',function(){ //this is a class
  ...

取决于它在文档中是否唯一。但是无论哪种方式，您都必须在两者上都使用类或在两者上都使用ID。

2 避免在Javascript变量中使用$(document).on('click','#display',function(){ //Or <input type="image" onclick="PlaySound2()" class="display" ..，如果在使用PHP时不必使用$，那是个坏主意。它会使代码令人困惑。如果它们在错误的位置，PHP可能会认为它们适合他。

3 （这些查询（我看不到））

 $query2 = "SELECT * FROM gormint where post_id = $pixid and user_id= $id3";
 $fire2 = mysqli_query($con,$query2) or die("can not fetch data from database ".mysqli_error($con));
 $query3 = "SELECT * FROM bhai where post_id = $pixid and user_id= $id3";
 $fire3 = mysqli_query($con,$query3) or die("can not fetch data from database ".mysqli_error($con));

 ....

if(mysqli_num_rows($fire2)>0) {
  echo "<img src='gormint.jpg' class='gormint2' style='width:30px; height:30px;'  >";
 }elseif (mysqli_num_rows($fire3)>0) {
   echo "<img src='bhai.jpg' class='bhai2' style='width:30px; height:30px;'>";
 }elseif(....

您正在运行4个查询，因此，因为您使用单个条件块，所以其中一个条件的结果很重要。考虑使用Join或重组代码。您需要为网络流量支付大量性能，然后基本上将数据丢弃。

请注意，即使您对if(mysqli_num_rows($fire2)>0) {进行了查询，也不会评估任何其他条件。至少要向其中添加LIMIT 1。

如何选择所需的单击元素的父级

1 个答案: