jquery - jQueryを使用して(親を介して)テーブルでマウスイベントをトリガーしますか?

Question

問題が発生しましたが、わかりません:

テーブルがあります。各セルには小さな定義リストとアンカーが含まれているため、次のようになります。

<table>
<tr>
    <td>
        <dl>
            <dt>Title</dt>
            <dd>Summary</dd>        
        </dl>
        <a>Link</a>
    <td>
</tr>
</table>

さらにいくつかの行と列がありますが、それで十分です:-)

私が望むのは、マウスが dl またはおそらく td に入った場合に (.hide()-Method を使用して) 非表示のアンカーを表示することです。さらに、「mouseenter」されていない td / dl に含まれる他のすべてのアンカーを非表示にします。

私は次の機能でそれを試しました：

(function(){
    $('td').on('mouseenter', 'dl', function(){
        ($(this)
            .next());
            .show();
            .slideDown(300)
                .siblings('a')
                    .slideUp(300);

    })  
})();

私が間違っていることは何か分かりますか？問題は、実行時に動的に tablecontent (tr およびそれ以下) を作成することでしょうか? アドバイスをいただければ幸いです。

Answer 1

このようなものは、あなたが望むものを達成するはずです:

$(function() {  
    $('td').on('mouseenter', function() {  
        $(this).parents('table').find('a').slideUp(300);
        $(this).children('a').slideDown(300);
    });
});

ここの jsFiddle を参照してください > http://jsfiddle.net/WR45L/。

Answer 2

以下に修正した JavaScript を使用してみてください。コードが間違っているようです。

(function(){
    $('td').on('mouseenter', 'dt', function(){
        $(this)
            .next()
                .slideDown(300)
            .parent('dl')
                .siblings('a')
                    .slideUp(300);

    })  
})();

Answer 3

使用する：

$(this).parent().next().show().slideDown(300).siblings('a').slideUp(300);