在我的完整日历中,我有一些复选框,我希望像过滤器一样做出反应。 简而言之:我想过滤一个,全部,三个,两个(多个)......依此类推。
我到目前为止,我可以选择一个复选框,它会返回正确的事件,但它当然不能用于两个以上的复选框。 但我不知道,怎么做!我的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
}
},
});
对于多个选择,Javascript是如何实现的?感谢之前=)
答案 0 :(得分:0)
小提琴演示: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;
},
});