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

Question

I have a while loop in which I am fetching posts of user's friend now I have a react column in which user can choose his reaction emoji and I want to hide the div with class react2 when any reaction is clicked now I am unable to choose the parent div that is react2 of the clicked input type. this is my code :

<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> 

And this is my script :

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

    }});
}); 

Now when I click on reaction button the react2 div does not fade out what am I doing wrong???

Answer 1

The reason it doesn't work is your getting the id. So you basically are trying to do this (assuming parent().parent() stuff works)

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

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

}});

In English, .attr('id') returns a string, then you call fade out on it. Basically your calling fadeOut() on a string and not a Dom Element, and a string has no concept of that function. That's assuming your event handler even fires (see below).

For example(incorrect)

$('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>

If you have to keep that parent()... stuff, either remove the attr call or wrap the resulting ID $('#'+$panelClass).fadeOut(); which looks awful, besides doing an additional DOM lookup.

For example(correct)

$('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>

Honestly I don't know what is wrong with doing something like this $(this).closest('.react2').fadeOut();.

For example (better, wont brake if you add another nested 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>

Using closest is cleaner (less code), more specific, and it won't break if you happen to need another element to wrap the input in. With parent if you add another wrapping element, such as a <label> you have to add another parent() call in there.

Other things, beyond the current issue

1 I'm not even sure your event handler is being triggered because you assigned it to a class and you have an id in the DoM.

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

Should be:

  $(document).on('click','#display',function(){
  //Or
  <input type="image" onclick="PlaySound2()" class="display" ..

Depending on if it's unique in the document. But either way you have to use a class on both or an ID on both.

2 Avoid using the $ in your Javascript variables, it's just a bad idea to use them if you don't have to when your using PHP. It can make the code confusing to look at. If they are in the wrong place PHP could think they are for Him.

3 These queries (I can't look at them)

 $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(....

Your running 4 queries, then because you use a single conditional block only the results of one of them matter. Consider using a Join, or restructuring your code. Your paying a lot of performance for network traffic and then just basically throwing the data away.

Just to be clear if if(mysqli_num_rows($fire2)>0) { passes none of the other conditions are evaluated, even though you did the queries for them. At the very least add LIMIT 1 to them.

</div>