jquery - JQuery切换未知数量的表

Question

我有一个页面查询选定日历日期的事件，并将它们分组在一个单独的表中，用于每种不同的事件类型。

显然这个列表可能会变得非常大，而不是显示所有内容并且用户必须滚动很多我希望我可以使用切换功能来隐藏事件类型的事件列表，当他们单击该事件类型的表头时.

我正在努力解决的问题是，我不知道任何选定的日期会有多少种不同的事件类型，那么我该如何编写一个只隐藏该选定事件类型的函数呢？

Answer 1

你的问题并没有真正给我们太多继续，所以也许我完全不同意这个答案。

但我认为您需要为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>