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>

我希望这会有所帮助。

使用FullCalendar中的单选按钮进行jQuery过滤

1 个答案: