jquery 호버 및 while 루프

Question

나는 루프를 사용하여 레코드를 보여주는 PHP 테이블을 가지고있다.

jTraery 호버 핸들러를 추가하여 호버링하면 같은 행에 메시지가 표시됩니다. 호버링을 사용하면 모든 행에 메시지가 표시됩니다. 여기

는 CSS입니다 : 여기

<style> 
    .tansa{ 
    position: absolute; 
    margin-right: -60px; 
    margin-top:-25px; 
    background: #CBDFF3; border: 1px solid #4081C3; font-size: 0.88em; 
    padding: 2px 7px; display: inline-block; 
    border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; 
    line-height: 1.2em; 
    text-shadow: 0 0 0em #FFF; 
    overflow: hidden; 
    text-align: center; 
    color:black; 
    display:none; 
    } 

    .arrow{ 
    position: relative; 
    width: 0; 
    height: 0; 
    top: -25px; 
    border-top: 5px solid #000000; 
    border-right: 5px solid transparent; 
    border-left: 5px solid transparent; 
    display:none; 
    } 
</style> 

내 PHP는 다음과 같습니다

<table><tr>row</tr> 
<?php 
$results = mysql_query("select * from MyTable"); 
while{$r = mysql_fetch_array($results)){ 
echo "<tr><td>Row : <img src='img/tans.png' width='24' height='24' class='tansef' /><span  class='tansa' >the message</span><div class='arrow'></div></td></tr>"; 
} 
?> 
</table> 

다음은 각 행의 메시지를 표시하는 JQuery와

$(document).ready(function(){ 
    $('.tansef').hover(function(){ 
    var sh = $('.tansa'); 
    var sharrow = $('.arrow'); 
    sh.show(); 
    sharrow.show(); 
    }, function(){ 
    var shs = $('.tansa'); 
    var sharrows = $('.arrow'); 
    shs.hide(); 
    sharrows.hide(); 
    }); 
}); 

모든 솔루션은?

Answer 1

변화보십시오

var sh = $('.tansa'); 
var sharrow = $('.arrow'); 

에 :

var sh = $(this).siblings('.tansa'); 
var sharrow = $(this).siblings('.arrow'); 

(뿐만 아니라 상응 SHS 및 sharrows 변수). 코드에서 this을 사용하여 위에 놓은 것과 관련된 요소 대신 특정 클래스가있는 모든 요소를 ​​참조합니다. 이것이 당신의 질문에 대답하는 경우

jsFiddle example