使用FullCalendar中的單選按鈕進行jQuery過濾

Question

我正在嘗試使用JQUERY FullCalendar中的一組按鈕來過濾事件。

我在下拉菜單中選擇了該下拉菜單，並根據類別是狗還是貓來過濾事件。 但是我不能用普通按鈕來做到這一點。

下拉菜單工作：

 $(document).ready(function() { // page is now ready, initialize the calendar.. $('#calendar').fullCalendar({ displayEventTime: false, themeSystem: 'bootstrap4', header: { left: 'prev,next today', center: 'title', right: '' }, editable: false, // Don't allow editing of events handleWindowResize: true, //console.log((events)) events : [{start: '7/17/2018',title:"Single Type", category:"Dog"}, {start: '7/19/2018',title:"Single Type", category:"Cat"}, {start: '7/23/2018',title:"Multiple Types", category:"Cat, Dog"}, {start: '7/26/2018',title:"Multiple Type", category:"Dog, Cat"},], /**/ eventRender: function(event, element,view) { element.qtip({ content: event.description + '<br />', style: { classes: 'qtip-green', }, position: { corner: { target: 'center', tooltip: 'bottomMiddle' } } }) return $('#type_selector').val() === 'all' || event.category.indexOf($('#type_selector').val()) >= 0; }, }); $('#type_selector').on('change',function(){ $('#calendar').fullCalendar('rerenderEvents');}); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <link href = "https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet" type="text/css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script> <select id="type_selector"> <option value="all">all</option> <option value="Dog">Dog </option> <option value="Cat">Cat </option> <select> <div id="calendar"></div> 

對我有用的一件事是添加單選按鈕，可以成功渲染日歷。 但是按鈕不起作用，它們沒有過濾事件。

替換返回到：

return $('input[type=radio][name=type_selector]').val() === 'all' || event.category.indexOf($("input[type=radio][name=type_selector]:checked").val()) >= 0;

並將JQuery替換為

 $('#type_selector input[type=radio]').on('change',function(){
       $('#calendar').fullCalendar('rerenderEvents');});

按鈕html：

    <input type="radio" name="type_selector" class="btn btn-outline-primary" value="all" id="all" checked>
    <input type="radio" name="type_selector" value="Dog"id="Dog">
    <input type="radio" name="type_selector" value="Cat"id="Cat">

Answer 1

我已經編輯了您的片段。 您的onchange應該看起來像這樣，因為您的無線電中不再有ID #type_selector。

$('input[type=radio][name=type_selector]').on('change',function(){
       console.log("Event");
       $('#calendar').fullCalendar('rerenderEvents');});

在您的return語句中，應使用：checked選項獲取當前選定的單選值。

$('input[type=radio][name=type_selector]:checked').val() === 'all' || event.category.indexOf($("input[type=radio][name=type_selector]:checked").val()) >= 0;

 $(document).ready(function() { // page is now ready, initialize the calendar.. $('#calendar').fullCalendar({ displayEventTime: false, themeSystem: 'bootstrap4', header: { left: 'prev,next today', center: 'title', right: '' }, editable: false, // Don't allow editing of events handleWindowResize: true, //console.log((events)) events : [{start: '7/17/2018',title:"Single Type", category:"Dog"}, {start: '7/19/2018',title:"Single Type", category:"Cat"}, {start: '7/23/2018',title:"Multiple Types", category:"Cat, Dog"}, {start: '7/26/2018',title:"Multiple Type", category:"Dog, Cat"},], /**/ eventRender: function(event, element,view) { element.qtip({ content: event.description + '<br />', style: { classes: 'qtip-green', }, position: { corner: { target: 'center', tooltip: 'bottomMiddle' } } }) var ret = $('input[type=radio][name=type_selector]:checked').val() === 'all' || event.category.indexOf($("input[type=radio][name=type_selector]:checked").val()) >= 0; console.log($('input[type=radio][name=type_selector]:checked').val()); return ret; }, }); $('input[type=radio][name=type_selector]').on('change',function(){ console.log("Event"); $('#calendar').fullCalendar('rerenderEvents');}); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <link href = "https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet" type="text/css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script> <input type="radio" name="type_selector" class="btn btn-outline-primary" value="all" id="all" checked> all <input type="radio" name="type_selector" value="Dog" id="Dog">Dog <input type="radio" name="type_selector" value="Cat"id="Cat">Cat <div id="calendar"></div> 

我希望這有幫助。