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>