1

選択したカレンダーの日付のイベントをクエリし、さまざまなイベントタイプごとに個別のテーブルにグループ化するページがあります。

明らかに、このリストは非常に大きくなる可能性があり、すべてが表示され、ユーザーが多くスクロールする必要があるのではなく、トグル関数を使用して、イベントタイプのテーブルヘッダーをクリックしたときにイベントタイプのイベントのリストを非表示にできることを望んでいました。

私が頭を悩ませている問題は、選択した日付にいくつの異なるイベントタイプがあるかわからないということです。それでは、選択したイベントタイプのみを非表示にする関数を作成するにはどうすればよいですか？

4

1 に答える 1

0

あなたはあなたの質問で私たちに多くを与えていないので、おそらく私はこの答えに完全に同意していません。

ただし、イベントを表す要素に属性を追加する必要があると思いますevent-type。その後、jQueryを使用して要素を選択し、トグルを適用できます。

<style>
display-none { display:none; }
</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$().ready(function () {

    $('div[event-type]').toggle('display-none');

    $('div[event-type-header]').bind('click', function () {
        var eventType = $(this).attr('event-type-header');
        $('div[event-type="' + eventType + '"]').toggle('hide-event-type');
    });
});
</script>

<!-- header -->
<div event-type-header="party">toggle party</div>
<div event-type-header="auction">toggle auction</div>

<!-- content -->
<div event-type="party">party1</div>
<div event-type="auction">auction1</div>
<div event-type="party">party2</div>
<div event-type="auction">auction2</div>
于 2012-07-16T10:39:17.843 に答える