Is there a better way to use jQuery toggle

Overview:

I have a javascript calendar that has multiple views (day, week, month) which generates events with class names in those views.

I am trying to implement a good way of toggling the visibility of these events on or off and having these changes continued as the views are changed.

$("button").click(function () {
$(".calendar_event").toggle();
});

As far as I can tell this changes the inline property of the event, which works great until you change the view and the event is reloaded in dynamically by the calendar (which erases the display:none property inserted by toggle();

I have also tried assigning a class (.hidden) with a display property of none;

$('button').toggle(function () {
    $(".calendar_event").addClass("hidden");
}, function () {
    $(".calendar_event").removeClass("hidden")开发者_Go百科;
});

This unfortunately didn't work when changing the view.

Does someone have a solution to this?

Tim

No change you make to the document (DOM) is going to survive the reload if it's loading in new HTML. You'll have to store the event state somewhere, perhaps in another frame, server-side or using cookies then reapply the class/style.

http://api.jquery.com/toggleClass/

I would suggest setting a "calender-event-disabled" class to the container (it must be outside the replaced calendar html fragment) that holds the entire calendar. Your button would then add/remove the above mentioned class. Add some css that hides the events if both classes are present.