3

私は実際にテーブルで構成されるプロジェクトに取り組んでいます。

この表には、いくつかの TR と TD が含まれています。これらとは、私の JQuery、より正確には Ajax から生成されるため、動的に生成されます。

私がやりたいのは、マウスオーバー イベントを TD に配置することです。そのため、マウスを TD の上に置くとクラスが追加され、マウスアウトするとクラスが削除されます。

しかし、これは動的に生成されるアイテムであるため、普通にマウスオーバー イベントを実行することはできません。

TD はすべて同じクラスです。

これが私のTDを作成する行です

$('#index-table > tbody').append("<td class='index-table-cell'><a href='"+ PathChampion + "' class='index-table-nameLink'><div class='index-table-nameContainer'>" + this['name'] + "</div><img src='" + PathImage + "' alt='" + this['pkChampion'] + "' class='index-table-image'></a></td>");

やりたいことの 50% で機能する単純なコードがあります。私のクラスは TD に追加されますが、問題はそれがすべての TD に追加されることであり、マウスオーバーされた TD に新しいクラスを配置したいだけです。

$("#index-table").on({
    mouseenter: function () {
        $(this).find('.index-table-image').addClass("index-table-imageHover");
        $(this).find('.index-table-image').prev().addClass("index-table-nameContainerHover")
        console.log($(this));
    },
    mouseleave: function () {
        $(this).find('.index-table-image').removeClass("index-table-imageHover");
        $(this).find('.i ndex-table-image').prev().removeClass("index-table-nameContainerHover")
    }
});

助けてくれてありがとう:)!!!

4

2 に答える 2

3

委任を追加します。

$("#index-table").on({
    mouseenter: function () {
        $(this).find('.index-table-image')
               .addClass("index-table-imageHover")
               .prev()
               .addClass("index-table-nameContainerHover")
    },
    mouseleave: function () {
        $(this).find('.index-table-image').removeClass("index-table-imageHover");
        $(this).find('.i ndex-table-image').prev().removeClass("index-table-nameContainerHover")
    }
}, 'td.index-table-cell');

または、適切なDOM 要素を作成するときにイベント ハンドラーを追加することをお勧めします。

var td  = $('<td />', {'class':'index-table-cell', 
                       on: {
                           mouseenter: function() {
                               $(this).find('.index-table-image')
                                   .addClass("index-table-imageHover")
                                   .prev()
                                   .addClass("index-table-nameContainerHover");
                           },
                           mouseleave: function() {
                               $(this).find('.index-table-image').removeClass("index-table-imageHover");
                               $(this).find('.i ndex-table-image').prev().removeClass("index-table-nameContainerHover");
                           }
                       }
                      }),
    a   = $('<a />',  {'class':'index-table-nameLink',  href: PathChampion}),
    div = $('<div />', {'class':'index-table-nameContainer', text: this['name']}),
    img = $('<img />', {'class':'index-table-image', src:PathImage, alt:this['pkChampion']});

$('#index-table > tbody').append( td.append( a.append(div, img) ) );
于 2013-07-31T21:29:47.070 に答える
1

Event Delegationを使用して、以下のようにセレクターを渡すことはできません。

$("#index-table").on({
    mouseenter: function () {
        $(this).find('.index-table-image').addClass("index-table-imageHover");
        $(this).find('.index-table-image').prev().addClass("index-table-nameContainerHover")
        console.log($(this));
    },
    mouseleave: function () {
        $(this).find('.index-table-image').removeClass("index-table-imageHover");
        $(this).find('.i ndex-table-image').prev().removeClass("index-table-nameContainerHover")
    }
}, ".index-table-cell");
         ^----------------- Pass the selector here

imageこれで、イベントが発生する特定の td にのみ影響するはずです。

于 2013-07-31T21:29:39.813 に答える