0

カレンダーで、複数のテーブルにまたがるテーブル セルを強調表示するスクリプトを作成しています。強調表示される日は、クラスが「利用可能」です。これは現在の jQuery コードです。

$(document).ready(function(){
$("td.available").mouseenter(function() {
    $(this).addClass("highlight");
    $(this).next().addClass("highlight");
});
$("td.available").mouseleave(function() {
    $(this).removeClass("highlight");
    $(this).next().removeClass("highlight");
})
});

ただし、強調表示は、ホバーされている要素を含むテーブル内でのみ機能します。. next() は、によって返されたセットではなく$("td.available")、生の DOM で動作していると思います。

セットを適切に操作するには、どの関数を使用する必要がありますか?

編集:私がしたいのは、隣接するセルも強調表示されることです。たとえば、次の 7 つのセルも強調表示されるように、これを展開できます。

31 を含むセルにカーソルを合わせると、強調表示する他のセルは、翌月を含む別のテーブルに表示されます。一連の td 要素を取得するには、さまざまな「each」を使用する必要があると思います。

4

5 に答える 5

1

mouseenter イベント内の $(this) が呼び出されると、マウスが入力した特定の TD を意味しますが、ドキュメント内の td.available のセット全体ではありません。

つまり、$(this).addClass(...) は "hovered" td にクラスを追加し、$(this).next().addClass(...) はクラスを " hovered" td でも利用できません。

私はあなたが何を期待していたのかよくわかりませんが、ユーザーにテーブルをホバーさせたい場合は、利用可能なすべてのセルが「点灯」し、次のことを試すことができます:

$(".tableNeedToLightUp").mouseenter(function(){
    $("td.available", this).addClass("highlight"); // This select all available tds in the table, if all table light up, take away "this"
}

mouseout イベントも同様です。

于 2009-07-03T15:11:52.397 に答える
0

jQuery は最新バージョン (1.4) で新しい next 関数を提供します。関数の簡単な説明については、投稿で言及しました。それを見て、JQueryを使って頑張ってください。ここにリンクがあります

http://aspnet-ajax-aspnetmvc.blogspot.com/2010/10/jquery-next-fucntion-with.html

于 2010-10-29T06:42:23.910 に答える
0

を使用する必要がありますeach()。next()DOM のみを歩きます。

于 2009-07-03T15:07:35.623 に答える
0

あなたが何をしようとしているのか正確にはわかりませんが、next()トリガーされている要素に続くすべての要素ではなく、次の要素のみを取得します。nextAll()「td.available」のセレクターと一緒に使用したい場合があります。または、強調表示を解除する要素が現在のセルに続く要素だけではない場合は、すべてのテーブル セルを再選択する必要があります。

于 2009-07-03T15:10:50.950 に答える
0

あなたの意図を正しく理解していれば、これでうまくいくはずです：

function highlight_all_available_tds() {
    $("td.available").addClass("highlight");
}

function remove_highlight_from_available_tds() {
    $("td.available").removeClass("highlight");
}

$(document).ready(function () {
    $("td.available").
        mouseenter(highlight_all_available_tds).
        mouseleave(remove_highlight_from_available_tds);
});
于 2009-07-03T15:13:07.903 に答える