테이블 행 마우스 오버시 표 셀 표시

Question

다음과 같은 표가 있습니다.

<table> 
    <thead> 
    <tr> 
     <th>Foo</th> 
     <th>Bar</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr class="data"> 
     <td>Info here</th> 
     <td><a href"/url_here" class="edit">Edit</a></td> 
    </tr> 
    <tr class="data"> 
     <td>More here</th> 
     <td><a href"/url_here" class="edit">Edit</a></td> 
    </tr> 
    </tbody> 
</table> 

내부의 행 위에 마우스를 올려 놓으면 수정 링크를 표시하고 싶습니다. 이 작업을 수행하는 몇 가지 방법을 시도했지만 동일한 문제가 계속 발생합니다. 내가 이것에 대해서 잘못 생각하고 있다고 가정합니다.

이것은 내가 현재 가지고있는 것입니다.

$('a[class*=edit]').hide(); 

$('tr[class*=data]').bind("mouseover", function(e) { 
    $(e.target).closest('a[class*=edit]').addClass("selected"); 
    $('a[class*=selected]:first').show(); 
}).mouseout(function() { 
    $('a[class*=selected]').hide(); 
    $('a[class*=edit]').removeClass("selected"); 
}) 

수정 링크 바로 위에 있지 않으면 기존 코드에 문제가 있습니다. 선택한 클래스를 추가하지 않는 것입니다. 위에서 언급 한 것처럼 선택한 클래스를 추가하려면 해당 행의 아무 곳이나 마우스를 올려야합니다. 또한 특정 행에 대한 수정 링크 만 표시되기를 원합니다.

어떤 도움이라도 내 머리카락을 몇 시간 동안 꺼내 주면 정말 도움이 될 것입니다. 감사!

Answer 1

몇 가지 :

• 당신이 특정 요소의 스타일을 원한다면 당신이 CSS 스타일 시트에 넣어 수 있습니다 무엇에 해당 될 수있는 마법의 $() jQuery를 함수에 전달하는 문자열입니다. 현재 셀렉터를 사용하는 방식은 매우 명확하지는 않지만 격렬하게 비효율적입니다. 예를 들어 =* 선택기를 사용하면 클래스 속성에서 edit위치의 모든 링크가 인 모든 링크를 찾으려고합니다. 따라서 abceditabc 클래스의 링크는 일치합니다. 따라서 jQuery는 존재하지 않는 링크를 찾기 위해 필요한 것보다 훨씬 많은 작업을 수행합니다. 허용되는 사용법 대신에 a.edit과 같은 선택기 문자열을 사용하는 것이고 jQuery는 그것이 무엇인지 어떻게 얻는 지 신속하게 결정할 수 있습니다.
• 수행중인 것처럼 이벤트 바인딩을 수행 할 때마다 this은 이벤트가 현재 함수 내에서 작동되고있는 요소를 참조합니다. 이벤트 위임을 수행하지 않는 한 실제로는 e.target을 사용하지 않을 것입니다.
• 호가 직접 링크 위에있을 때 코드가 작동하는 이유는 다른 셀 위로 마우스를 가져갈 때마다 e.target이 형제가되기 때문입니다. closest은 그 td를 트래버스하여 다음 td까지 링크까지 트래버스 할 수 없습니다. 그리고 그렇게하더라도, 필요하지 않으므로 이것을 피하고 싶을 것입니다. 이는 테이블 행에서 링크를 내려다 보는 것이 훨씬 쉽기 때문에 두 번째 요점과 관련이 있습니다.

그래서, 마음에 이러한 것들을 유지, 당신은 당신이에 무엇을 다시 작성할 수 있습니다 :

$(function() { 
    $('a.edit').hide(); // hide all links with a class of edit 
    // act upon all table rows with a class of data 
    $('tr.data').hover(function() { 
     // at this point, 'this' is the table row that is being hovered 
     // we can use the find function to locate the link with a class of edit 
     // then add a class to it and show it. 
     $(this).find('a.edit').addClass("selected").show(); 
    }, function() { 
     // the second argument of the hover function is what should happen 
     // when the mouse hovers out of the table row. In this case, we want 
     // to find the link again, remove the class, and hide it. 
     $(this).find('a.edit').removeClass("selected").hide(); 
    }); 
}); 

당신은 코드 당신이 here 게시 된 HTML에 작용하는이 코드를 볼 수 있습니다. FF, IE에서 나를 위해 작동합니다.

몇 가지 더 제안 :

• 항상 jQuery documentation가 열려 있습니다. 그것은 일이 어떻게 작동 하는지를 설명하는 데 아주 좋습니다.
• jQuery를 디버깅 할 때 Firefox/Firebug을 익숙해 지십시오. 정확히 무엇이 선택되고 있는지를보고 싶을 때 선택 자 안에 console.log(this);을 사용하면 절제 할 수없는 기능입니다.

Answer 2

내가 논리가 맞다고 가정하면 다음과 같이 시도해보십시오.

$(document).ready(function() { 
    $('a.edit').hide(); 
    $('tr.data').hover(function() { 
    $(this).addClass("selected").find('a.edit').show(); 
    }, function() { 
    $(this).removeClass("selected").find('a.edit').hide(); 
}); 
}): 

귀하의 특정 오류가 가장 가능성이 당신이 나무를 UP traveses closest 방법을 사용하고 있다는 사실과 관련이있다.

업데이트 : 코드가 작동하지 않는 또 다른 이유는 jquery document.ready 기능을 사용하지 않기 때문입니다. 내 코드를 업데이트했습니다.