使用javascript显示/隐藏fullcalendar上的事件

我正在为一个项目制作一个宗教日历，展示所有主要宗教的不同事件。我使用的是完整的日历，我在日历的顶部有一个“宗教密钥”，我想这样，当我点击，例如，犹太，它将隐藏日历上所有与犹太信仰无关的宗教事件/节日。我有点麻烦。我的想法是，我会将css中的“.fc event”类设置为display:none”，然后有一个名为.show的类，该类将是display:block。当用户单击与假日相关的菜单项时，切换该类/删除该类。是否有更好/更简单的方法来执行此操作？希望得到一些指导/提示/帮助：）谢谢

以下是我的日历js代码（显然使用了化装日期）：

以及日历和日历键的php代码：

<nav class="calendar-nav">
<ul class="menu">
    <li class="christianity-text"><a href="#" rel="christian">><img src="/images/calendar/christianity.png" />CHRISTIAN</a>
        <ul class="sub-menu">
            <li><a href="#">Catholic</a></li>
            <li><a href="#">Protestant</a></li>
            <li><a href="#">Coptic</a></li>
            <li><a href="#">Mormon</a></li>
            <li><a href="#">Neo</a></li>
            <li><a href="#">Anglican</a></li>
            <li><a href="#">Celtic</a></li>
            <li><a href="#">Jehova's Witness</a></li>
        </ul>
    </li>
    <li class="buddhist-text"><a  href="#" rel="buddhist"><img src="/images/calendar/buddhism.png" />BUDDHIST</a></li>
    <li class="hindu-text"><a  href="#" rel="hindu"><img src="/images/calendar/hindu.png" />HINDU</a></li>
    <li class="jewish-text"><a  href="#" rel="jewish"><img src="/images/calendar/jewish.png" />JEWISH</a></li>
    <li class="islam-text"><a  href="#" rel="islam"><img src="/images/calendar/islam.png" />ISLAM</a></li>
    <li class="sikh-text"><a  href="#" rel="sikh"><img src="/images/calendar/sikh.png" />SIKH</a></li>

    <li class="pagan-text"><a  href="#" rel="pagan"><img src="/images/calendar/pagan.png" />PAGAN</a></li>
    <li class="wiccan-text"><a  href="#" rel="wiccan"><img src="/images/calendar/wiccan.png" />WICCAN</a></li>
    <li class="other-text"><a  href="#" rel="other"><img src="/images/calendar/other.png" />OTHER</a></li>
    <li class="all-text"><a href="#" rel="all">ALL</a></li>
</ul>
</nav>

<div id='calendar'></div>

您可以执行以下操作：

---

A.您可以添加/删除具有

display:none

和

display:block

$（this.addClass（'hideClass'）；

和

$（this.addClass（'showClass'）；

css

---

B.您可以切换隐藏和显示

$（this.hide（）；

和

$（this.show（）；

---

C.您可以通过使用更改css属性本身。这是更好的选择，尤其是当您异步重新绘制元素时。css的更改将保留

请注意，chrome不支持这一点，这导致我们……

---

附加CSS文件以覆盖类

您可以添加一个.css文件，其中的类具有

！important

，以覆盖当前设置

$（“head”）。追加（“”；

---

这是为了确保如果异步重新绘制页面，则属性保持不变。

认为使用CSS和少量JS管理此类内容要容易得多。下面的示例是一种最小用例版本，但其思想是相同的

/*
聆听导航上的点击。使用每个按钮

印度教徒1
异教徒1
印度教徒2
异教徒2
印度教徒3
异教徒3

另一种解决方案是将自定义属性“宗教”添加到事件中，并将其保存到数据库中。从包含要显示的宗教的数据库中获取事件：

JavaScript:

process.php

---

我想给你们一个建议！我更喜欢使用javascript逻辑。你们有你们的事件对象，这样你们就可以重新创建你们需要的数据

$(document).ready(function(){
var events = [
    {
        title: 'xmas',
        start: '2017-03-19',
        className: 'catholic show',
        description: 'blablablablabla'
    },
    {
        title: 'Hanukkah',
        start: '2017-03-19',
        className: 'jewish show',
        description: 'blablablabla'
    },
    {
        title: 'Hindu Holiday',
        start: '2017-03-24',
        end: '2017-03-27',
        className: 'hindu show',
        description: 'blablablabla'
    }
];
//init calendar 
$("#calendar").fullCalendar({
  events : events
});

$('.calendar-nav a').click(function(e) {    
        e.preventDefault();    
        var x = $(this).attr('rel');
        //if all, shows original events object
        if(x == "all") {
          newEvent = events;
        } else{
        var newEvent = checkEvent(x,events); //recreate object function
        }
        $('#calendar').fullCalendar('destroy');
        $("#calendar").fullCalendar({
          events : newEvent
        });
});
});

function checkEvent(x,events) {  
  var newEvent = [];
  for(var i in events) {
    var key = events[i].className.split(" ")[0];
    if(key == x) { //check same religious name
      newEvent.push(events[i]);
    }
  }
  return newEvent;
}

---

这里还有一些其他的例子：@anthony break？如何打破？

hideClass
{ display:none; }

showClass
{ display:block; }

...
$.ajax({
        url: 'process.php',
        type: 'POST',
        data: 'religion=1",
        async: false,
        success: function(response){
            json_events = response;

        }
});
$(#calendar).fullCalendar({
    events: JSON.parse(JSON.stringify(json_events)),

});     

$religion = $_POST['religion'];
$query = "SELECT * FROM calendar WHERE religion='$religion'";
...

$(document).ready(function(){
var events = [
    {
        title: 'xmas',
        start: '2017-03-19',
        className: 'catholic show',
        description: 'blablablablabla'
    },
    {
        title: 'Hanukkah',
        start: '2017-03-19',
        className: 'jewish show',
        description: 'blablablabla'
    },
    {
        title: 'Hindu Holiday',
        start: '2017-03-24',
        end: '2017-03-27',
        className: 'hindu show',
        description: 'blablablabla'
    }
];
//init calendar 
$("#calendar").fullCalendar({
  events : events
});

$('.calendar-nav a').click(function(e) {    
        e.preventDefault();    
        var x = $(this).attr('rel');
        //if all, shows original events object
        if(x == "all") {
          newEvent = events;
        } else{
        var newEvent = checkEvent(x,events); //recreate object function
        }
        $('#calendar').fullCalendar('destroy');
        $("#calendar").fullCalendar({
          events : newEvent
        });
});
});

function checkEvent(x,events) {  
  var newEvent = [];
  for(var i in events) {
    var key = events[i].className.split(" ")[0];
    if(key == x) { //check same religious name
      newEvent.push(events[i]);
    }
  }
  return newEvent;
}