javascript - 为 Fullcalendar eventRender 选择多个复选框

Question

在我的全日历上，我有一些复选框，我希望它们像过滤器一样使用react。简而言之:我想过滤一个、全部、三个、两个(多个)...等等。

到目前为止，我可以选择一个复选框，并且它会返回正确的事件，但当然，它不适用于两个以上的复选框。但我不知道，该怎么做!我的 JavaScript 技能不太好。

我使用 Json 文件获取事件，该文件是我在模型中使用 Ruby on Rails 4 创建的。但我不想分割这个Json。所以我寻找完整的 Javascript 版本。

我认为，代码会更好地表达我的意思。

HTML:

<input id="hamburg" class="event_filter_box" name="event_filter_select" type="checkbox" value="Hamburg">Hamburg</input>
<input id="schleswig-holstein" class="event_filter_box" name="event_filter_select" type="checkbox" value="Schleswig-Holstein">Schleswig-Holstein</input>

<input id="party" class="event_filter_box" name="event_filter_select"  type="checkbox" value="Party">Party</input>
<input id="concert" class="event_filter_box" name="event_filter_select" type="checkbox" value="Concert">Concert</input>
<input id="festival" class="event_filter_box" name="event_filter_select" type="checkbox" value="Festival">Festival</input>

<div id="calendar"></div>

Javascript:

$(document).ready(function() {
  $('input[class=event_filter_box]').change(function() {
    $('#calendar').fullCalendar('rerenderEvents');
  });
});


$("#calendar").fullCalendar({
  events: [
    {
      title: 'Party Event in Hamburg',
      start: '2015-11-11',
      address_city: 'Hamburg',
      kind: 'Party',
    }, 
    {
      title: 'Conzert Event in Hamburg',
      start: '2015-11-10',
      address_city: 'Hamburg',
      kind: 'Concert',
    }, 
    {
      title: 'Festival Event in Schleswig-Holstein',
      start: '2015-11-08',
      end: '2015-11-12',
      address_city: 'Schleswig-Holstein',
      kind: 'Festival',
    }, 
  ],
  defaultView: "basicWeek",
  eventRender: function eventRender( event, element, view ) {
    if ($('input[id=hamburg]').is(':checked')) {
      return ['all', event.address_city].indexOf($('#hamburg').val()) >= 0
    } else if ($('input[id=schleswig-holstein]').is(':checked')) {
      return ['all', event.address_city].indexOf($('#schleswig-holstein').val()) >= 0
    } else if ($('input[id=party]').is(':checked')) {
      return ['all', event.kind].indexOf($('#party').val()) >= 0
    } else if ($('input[id=concert]').is(':checked')) {
      return ['all', event.kind].indexOf($('#concert').val()) >= 0
    } else if ($('input[id=festival]').is(':checked')) {
      return ['all', event.kind].indexOf($('#festival').val()) >= 0
    }
  },
});

codepen

对于多重选择，Javascript 是怎样的？先谢谢了 =)

Answer 1

fiddle 演示:http://jsfiddle.net/gohrbk41/1/

我稍微更改了 HTML，添加了数据类型标签以区分城市和种类

<!-- I added data-type to the checkboxes -->
<input id="hamburg" class="event_filter_box" name="event_filter_select" type="checkbox" value="Hamburg" data-type="address_city">Hamburg</input>
<input id="schleswig-holstein" class="event_filter_box" name="event_filter_select" type="checkbox" value="Schleswig-Holstein" data-type="address_city">Schleswig-Holstein</input>

<input id="party" class="event_filter_box" name="event_filter_select"  type="checkbox" value="Party" data-type="kind">Party</input>
<input id="concert" class="event_filter_box" name="event_filter_select" type="checkbox" value="Concert" data-type="kind">Concert</input>
<input id="festival" class="event_filter_box" name="event_filter_select" type="checkbox" value="Festival" data-type="kind">Festival</input>

<div id="calendar"></div>

对于 javascript

$(document).ready(function() {
  $('input[class=event_filter_box]').change(function() {
    $('#calendar').fullCalendar('rerenderEvents');
  });
});


$("#calendar").fullCalendar({
  events: [
    {
      title: 'Party Event in Hamburg',
      start: '2015-11-11',
      address_city: 'Hamburg',
      kind: 'Party',
    }, 
    {
      title: 'Conzert Event in Hamburg',
      start: '2015-11-10',
      address_city: 'Hamburg',
      kind: 'Concert',
    }, 
    {
      title: 'Festival Event in Schleswig-Holstein',
      start: '2015-11-08',
      end: '2015-11-12',
      address_city: 'Schleswig-Holstein',
      kind: 'Festival',
    }, 
  ],
  defaultView: "basicWeek",
  eventRender: function eventRender( event, element, view ) {
      var display = true;
      var addresses = [];
      var kinds = [];
      // Find all checkbox that are event filters that are enabled
      // and save the values.
      $("input[name='event_filter_select']:checked").each(function () {
          // I specified data-type attribute in above HTML to differentiate
          // between locations and kinds of events.

          // Saving each type separately
          if ($(this).data('type') == 'address_city') {
              addresses.push($(this).val());
          }
          else if ($(this).data('type') == 'kind') {
              kinds.push($(this).val());
          }
      });

      // If there are locations to check
      if (addresses.length) {
          display = display && addresses.indexOf(event.address_city) >= 0;
      }

      // If there are specific types of events
      if (kinds.length) {
          display = display && kinds.indexOf(event.kind) >= 0;
      }

      return display;
  },
});