テーブル行のマウスオーバーでテーブルセルを表示

Question

私はこのような表を持っています。

あなたの中のいずれかの行の上にマウスを置くと、編集リンクが表示されます。私はこれを行ういくつかの方法を試しましたが、同じ問題を抱え続けています。私はちょうどこれについて間違った方法を考えていると仮定します。

これは現在私が持っているものです。

$('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"); 
}) 

既存のコードの問題は、編集リンクに直接移動しない限り、選択したクラスを追加していないことです。上記のように、その行のどこにでもマウスを置くと、選択したクラスを追加する必要があります。私はまた、特定の行の編集リンクを表示したいだけです。

何か助けがあれば、私の髪を2時間ほど引き出してくれたことに感謝し、おそらく何か馬鹿だと分かっています。ありがとう！

Answer 1

いくつかのこと：

• あなたは魔法の$() jQueryの関数に渡す文字列は、あなたが特定の要素のスタイルをしたい場合は、CSSスタイルシートに置いてもよいものを同等にすることができます。今セレクタを使用している方法は非常に明確ではないだけでなく、非常に非効率的です。たとえば、=*セレクタを使用している場合は、文字列editを含むすべてのリンクをクラス属性のに見つけようとしています。したがって、クラスがabceditabcのリンクは一致します。これにより、jQueryは、これらの存在しないリンクを見つけるために必要以上に多くの作業を行います。受け入れられた使用法は、代わりに、a.editのようなセレクタ文字列を使用することです.jQueryは、それが何であるか、どのように取得するかを素早く判断できます。
• 実行中のようにイベントバインドを行うたびに、thisは、イベントが現在その関数内で実行されている要素を参照します。イベントの委任をしていない限り、実際にはe.targetを使用するつもりはありません。
• ホバーがリンクのすぐ上にあるときにコードが機能するのは、別のセルにマウスを移動したときにいつでもが兄弟となるためです。 closestは、そのtd、tr、次のtdまでリンクをたどることができません。たとえそれがあったとしても、必要ではないので、これを避けたいでしょう。これは2番目の点に結びついています。表の行からリンクが下がってくるのを探すのがずっと簡単です。だから、

、心の中でこれらの事を保ち、あなたはこれに持っているもの書き換えることができます：

$(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機能を使用していないため、コードが機能しない可能性があります。私はそのコードを更新しました。