0

PHPによって生成されたいくつかのdivがあり、次のように設定されています

<div style="width:215px;height:305px;background-color: rgba(255, 255, 255, 0.5);background-position: 0px 0px;background-repeat: no-repeat;background-size: 215px 305px;display:none;position:fixed;top:100px;left:100px;" id="more####"></div>

id の # を数字に置き換え (常に 4 つの数字があるとは限りません)、背景画像を別の自動生成 css ファイルに設定します。を消去するとdisplay:none;、それらすべてが 100、100 で表示され、背景が完全にきれいになります。

ただし、JQueryを使用してjavascriptファイルを作成したいので、テーブル行のセットアップにカーソルを合わせると

<tr id="yellow" class="yellow ####">

「黄色」は「黄色」、「緑」、「赤」、「代替」のいずれかであるか、id とクラスの両方で何もありません。一致する番号の div がマウスの位置に表示されます。可能であれば、マウスがテーブルの行の上に置かれなくなるまでマウスで移動し、その後再び非表示になります。

以前のスタックオーバーフローの質問から以下のコードを取得し、テーブルの最初の行に適用するように編集しましたが、機能しません。最初の行は次のとおりです。

<tr id="red" class="red 9776">

そしてdivは

<div id="more9776" style="width:215px;height:305px;background-color: rgba(255, 255, 255, 0.5);background-position: 0px 0px;background-repeat: no-repeat;background-size: 215px 305px;display:none;position:fixed;top:100px;left:100px;"></div>

以下のコードが機能しない理由はありますか?

    var mouseX;
    var mouseY;

    $(document).mousemove( function(e) {
        mouseX = e.pageX; 
        mouseY = e.pageY;
    });  

    $(".9776").mouseover(function(){
        $('#more9776').css({'top':mouseY,'left':mouseX}).fadeIn('slow');
    });

    $(".9776").mouseout(function(){
        $('#more9776').fadeOut('slow');
    });

同様に、各行にマウスオーバーとマウスアウトを定義せずに、テーブルのすべての行にコードを適用するにはどうすればよいでしょうか?

4

2 に答える 2

1

最後の文でほのめかしたように、あなたが持っているコードは、複数のIDにスケーリングするのは悪夢です。data-代わりに、テーブルの行に属性を追加し、行から ID を取得して適切な div を表示/非表示にする一般的なイベント リスナーをテーブルに追加することをお勧めします。一般的に言えば：

<table id="thetable">
    <tr id="yellow" class="yellow" data-id="9776"></tr>
    <tr id="red" class="red" data-id="8523"></tr>
</table>

その後：

$("#thetable").on('mouseover','tr',function(){
    id = $(this).data('id');
    $('#more' + id).css({'top':mouseY,'left':mouseX}).fadeIn('slow');
});

$("#thetable").on('mouseout','tr',function(){
    id = $(this).data('id');
    $('#more' + id).fadeOut('slow');
});

上記のコードがどのように機能するかについて詳しくは、jQueryon()とメソッドを参照してください。data()

于 2013-07-30T23:01:57.893 に答える