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

Question

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

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

使用最接近的代码更简洁（代码更少），更具体，并且如果您恰好需要另一个元素来包装输入内容，则不会中断。使用父元素时，如果添加另一个包装元素（如<label> ，则必须添加那里有另一个parent()调用。

除当前问题外的其他事情

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

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

应该：

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

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

2避免在Javascript变量中使用$ ，如果在使用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 if(mysqli_num_rows($fire2)>0) {传递任何其他条件都不会被评估，即使您对它们进行了查询。 至少要向它们添加LIMIT 1 。