如何使用jQuery選擇sql查詢行的所有元素

Question

我有一個sql查詢，它使用while循環來顯示錶中的所有行。每行生成兩個div。一個用於行ID，另一個用於行名。當您將鼠標懸停在名稱的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(); 
});