Question

我正在制作一个宗教日历，用于展示所有主要宗教的不同事件的项目。我使用完整的日历，而且我有一个＆＃34;宗教信息键＆＃34;在日历的顶部，我想做到这一点，当我点击，例如，犹太人，它将隐藏在日历上不属于犹太信仰的所有宗教活动/假期。我遇到了麻烦。我的想法是，我会设置＆＃34; .fc-event＆＃34; css中的class来显示：none＆＃34;然后有一个名为.show的类，它将显示：block。并在用户单击与假日相关的菜单项时切换该类/删除该类。有没有更好/更简单的方法来做到这一点？会喜欢一些指导/提示/帮助:)谢谢。

这是我的日历js的代码（显然使用明确的日期）：

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'
        }
    ]
});

$('.calendar-nav a').each(function() {

    $(this).on('click', function(e) {
        e.preventDefault();

        var x = $(this).attr('rel');

        $('.fc-event-container').each(function() {

            $(this).removeClass('show');

            if($(this).hasClass(x)) {

                $(this).addClass('show');
            }
        });
    })
});

$('.show-all a').on('click', function() {
    $('.fc-event-container').each(function() {
        if(!$(this).hasClass('show')) {
            $(this).toggleClass('show');
        }
    });
});
});

日历和日历键的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>

Answer 1

您可以执行以下操作，

一个。您可以添加/删除包含display:none和display:block

的班级

$(this).addClass('hideClass');和$(this).addClass('showClass');

CSS

hideClass
{ display:none; }

showClass
{ display:block; }

B中。你可以切换隐藏和显示

$(this).hide();和$(this).show();

℃。您可以使用css variables更改css属性本身。这是更好的选择，尤其是当您异步重绘元素时... css的更改仍然存在。

请注意，Chrome不支持这一点，这导致我们......

d。附加CSS文件以覆盖类

您可以添加包含!important的类的.css文件来覆盖您当前的设置

$("head").append("<link id='yournewcss' href='hi-res.css' type='text/css' rel='stylesheet' />");

这是为了确保如果您异步重绘页面，该属性将保留。

Answer 2

认为使用CSS和一点点JS来管理这类事情要容易得多。下面的例子是一种最小的用例版本，但想法是一样的。

/* 
Listen for clicks on the nav. Use each <a>'s "data-show"
property to determine which class to add to the #calendar.

That class, along with the CSS will determine which to show (hide, actually).

By default, all events are shown. Only when the #calendar element
gets a class associated with our CSS does anything change. 

Since we're using the :not() selector to _hide_ everything else
(instead of showing something specific) there's no need for 
any 'show all'. Once #calendar has 'show-all', the default CSS comes through.
*/

$('.calendar-nav').on('click', 'a', function(evt) {
  var showType = $(this).data('show');
  var $calendar = $('#calendar');
  if(showType !== undefined) {
    $calendar.attr('class', '').attr('class', 'show-' + showType);
  }
});

.show-hindu li:not(.hindu),
.show-pagan li:not(.pagan) 
/* ... continue ... */ {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="calendar-nav">
  <a href="#" data-show="hindu">Hindu</a>
  <a href="#" data-show="pagan">Pagan</a>
  <a href="#" data-show="all">All</a>
</nav>

<div id="calendar">
  <ul class="events">
    <li class="hindu">Hindu 1</li>
    <li class="pagan">Pagan 1</li>
    <li class="hindu">Hindu 2</li>
    <li class="pagan">Pagan 2</li>
    <li class="hindu">Hindu 3</li>
    <li class="pagan">Pagan 3</li>
  </ul>
</div>

Answer 3

另一种解决方案可以是向事件添加自定义属性“宗教”并将其保存到数据库中。从具有您要显示的宗教信息的数据库中获取事件：

JavaScript的：

...
$.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)),

});

process.php

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

Answer 4

我想给你一个建议！我更喜欢用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;
}

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

4 个答案: