Question

我有一个sql查询，它使用while循环显示表中的所有行。每行生成两个div。一个用于行id，另一个用于行名称。当你将鼠标悬停在名为div的div上时，我希望显示带有行ID的div。

除了选择器之外，我得到了一切。我目前只是使用简单的类，但显然悬停在任何名称上显示所有id div，而不仅仅是你正在悬停的名称的id。

如果有人能解释什么是最好的达到这种效果我会非常感激。

PHP

$result = mysqli_query($con,"SELECT * FROM table ORDER BY id DESC");

    while($row = mysqli_fetch_array($result))
      {

    echo "<div class='id' class='hidden'>" . $row['id'] . "</div><div class='name'>" . $row['name'] . "</div>";

      }

的jQuery

$(document).ready(function() {
   $(".blue").mouseenter(function() {
       $(".red").removeClass("hidden");
   });
   $(".blue").mouseleave(function() {
       $(".red").addClass("hidden");
   });
   $(".red").mouseenter(function() {
       $(".red").removeClass("hidden");
   });
   $(".red").mouseleave(function() {
       $(".red").addClass("hidden");
   });
 });

CSS

.hidden {
 display: none;
}

Answer 1

样本结构：

<div class='container'>
   <div class='div_id' style='display:none;'>id</div>
   <div class='div_name'>name</div>
</div>
<div class='container'>
   <div class='div_id' style='display:none;'>id</div>
   <div class='div_name'>name</div>
</div>

JQUERY

$(".div_name").on("mouseenter",function(e){
    $(this).closest('.container').find('.div_id').show();
}).on("mouseleave",function(e){
    $(this).closest('.container').find('.div_id').hide();
});

Answer 2

PHP

$result = mysqli_query($con,"SELECT * FROM table ORDER BY id DESC");

while($row = mysqli_fetch_array($result))
{
   echo "<div class='order'><div class='id' class='hidden'>" . $row['id'] . "</div><div class='name'>" .       $row['name'] . "</div></div>";

}

的jQuery

$(".order").on("mouseenter",function(e){
  $(e.target).find('div.id').show();
});
$(".order").on("mouseleave",function(e){
  $(e.target).find('div.id').hide();
});

如何使用jquery选择sql查询行的所有元素

2 个答案: