Question

我制作数据透视表'save_events'和控制器'颜色'。在控制器中进行make查询，然后将其发送到Ajax。然后我得到events_id（它是我的数据透视表中的一列），我使用console.log（JSONObject.eventColored [0] .events_id）;检查id事件及其工作正常。但我需要将它传递给其他必须更改背景颜色事件的函数。我不知道该怎么做。

<script src="{{ asset('js/fullcalendar') }}/fullcalendar.js"></script>
<script src="{{ asset('js/bootstrap.js') }}"></script>
<script type="text/javascript">

$(document).ready(function() {

var base_url = '{{ url('/') }}'; 
$.ajax(
  {    
        type: "GET",
        url: "{!!route('color')!!}",             
        dataType: "json",
        data:{"events_id": '' },                 
        success: function(data)
        {
          var JSONString=data;
                //var JSONObject = JSON.parse(JSON.stringify(data));
                //console.log(data);      
                console.log(data.eventColored[0].events_id);
              var color_events=data.eventColored[0].events_id;

                  $('#bootstrapModalFullCalendar').fullCalendar({
  weekends: true,
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek'
  },
   eventClick: function(event, jsEvent, view) {
      $('#modalTitle').html(event.title);
      $('#modalBody').html(event.name);
      $('#eventUrl').attr('href','/home/zapis/'+event.id);
      $("#startTime").html(moment(event.start).format('HH:mm '));
      if (event.end) $("#endTime").html(moment(event.end).format('HH:mm '));
      else $("#endTime").html('');					    
      $('#fullCalModal').modal();
      return false;
    },

  eventLimit: true,
  FirstDay: 1,
        contentheight : 650,
        editable : true,
        allDay : false,
        aspectRatio : 2,
        slotLabelFormat : 'HH:mm:ss',
        timeFormat : 'HH:mm',
        displayEventEnd : true,
        events: {
    url: base_url + '/api',
    error: function() {
      alert("cannot load json");
    }
  },
   eventColor: 'white',

  eventAfterRender: function (event, element, view, color_events) {
  if(event.id==color_events){
    element.css('background-color', '#cccccc');											
  }
    else
    {
      if (event.title == "Wydzial 1") 
      {
          element.css('background-color', '#378006');
          }
          else if(event.title == "Wydzial 2")
          {
          element.css('background-color', '#ff0000');	
          }
          else if(event.title == "Wydzial 3")
          {
          element.css('background-color', '#73e600');	
          }
          else{
          element.css('background-color', '#0066ff');
          }
        }
  }

});

  }

});

});

</script>

在我的问题上：在Ajax中我得到了JSONObject.eventColored [0] .events_id并且我无法在eventAfterRender中使用它：function（event，element，view） 我收到了这个错误：

jQuery.Deferred exception: JSONObject is not defined .eventAfterRender@http://localhost:8000/home:206:1

和Controller（我所做的项目是使用Laravel 5.4）：

class Color extends Controller
{
    public function colorEvent()
    {
        $eventColored =  DB::table('save_events')->get(['users_id','events_id']);

        return response()->json(['eventColored'=>$eventColored])->$eventColored = array('eventColored' => $eventColored );

    }
}

的循环：

eventAfterRender: function (event, element, view) {
  var color_events = [];
  for (i = 0; i < data.eventColored.length; i++) {					
    color_events.push(data.eventColored[i].events_id);		
  };


  console.log(color_events);
  console.log(event.id);
if(color_events==event.id){

        element.css('background-color', '#cccccc');

}

  else
  {
    if (event.title == "Wydzial 1") 
    {
        element.css('background-color', '#378006');
        }
        else if(event.title == "Wydzial 2")
        {
        element.css('background-color', '#ff0000');	
        }
        else if(event.title == "Wydzial 3")
        {
        element.css('background-color', '#73e600');	
        }
        else{
        element.css('background-color', '#0066ff');
        }

      }
}

控制台

Array [ 8, 9, 7 ]  home:242:5
1  home:243:5
Array [ 8, 9, 7 ]  home:242:5
5  home:243:5
Array [ 8, 9, 7 ]  home:242:5
6  home:243:5
Array [ 8, 9, 7 ]  home:242:5
7  home:243:5
Array [ 8, 9, 7 ]  home:242:5
8  home:243:5
Array [ 8, 9, 7 ]  home:242:5
9  home:243:5
Array [ 8, 9, 7 ]  home:242:5
10

好的，我试着解释一下。 Fullcalendar获得1个名为“Events”的表，用户可以在主页上查看所有事件。接下来想想用户可以做什么是点击事件并加入它然后在数据透视表“save_events”＆lt;＆lt;中创建新记录。有2列users_id和events_id，此数据透视表是根据表“Users”和“Events”之间的关系制作的。并且全日历上的事件具有不同的颜色，这取决于例如如果tittle得到名字“Wydzial 1”颜色是红色别的标题将是“wydzial 2”颜色蓝色其他标题将是“wydzial 3”颜色绿色其他标题将是“wydzial 4”颜色黄色。如果用户加入到事件中，我想做一些像这样的事情，例如tittle“wydzial 1”的事件变成红色，当用户点击它并加入到这个事件时，它将变为灰色的颜色。我写了一个发布链接到github有我的项目。因此，在完成日历显示所有事件的主持人（用户角色之一）创建，用户可以加入（接受，保存）事件，如果有人加入事件，它将自动更改灰色的背景颜色。

Answer 1

这是问题所在：

 eventAfterRender: function (event, element, view, color_events) {

查看eventAfterRender的定义。 https://fullcalendar.io/docs/event_rendering/eventAfterRender/。回调中没有color_events这样的参数变量。你不能只发明自己的回调参数 - 没有任何东西会被填充到它们中，因为fullCalendar不知道它们。

你在代码中声明var color_events更高，这是正确的，但是你在eventAfterRender函数的回调参数中声明另一个color_events意味着一个新的，单独的color_events变量是在函数范围内声明的，并且您之前使用更宽范围声明的color_events会暂时被忽略。

要解决此问题，只需从回调签名中删除虚构的color_events参数：

eventAfterRender: function (event, element, view) {

现在，之前声明的color_events版本将在范围内并具有正确的值。

如果您不确定为什么会这样，请阅读有关JavaScript变量范围的教程。

关于你的循环：

1）第一个错误是data不是数组，它是一个对象。所以你在它上面做.each()没有意义，因为你知道对象的属性名，你已经知道你对event_colored属性感兴趣。 event_colored 虽然是一个数组 - 但是为什么你已经可以event_colored[0]来获取它的第一个元素。所以你想要成为循环的主题是event_colored - 你的内部循环已经使用传统的JS语法而不是jQuery，但它没有区别。

2）每次运行color_event = [(data.eventColored[i].events_id)];时，它都会使用包含最新事件ID的新数组覆盖color_event变量。将项添加到数组的正确方法是使用.push()方法。对JS阵列的快速谷歌搜索会告诉你这个。

我假设您想要将eventColored中的所有ID与fullCalendar中的事件ID进行比较？如果是这样，最快的方法如下。你已经有一个数组（data.event_colored），它在eventAfterRender方法的范围内，所以直接在那里使用它，而不是试图创建第二个数组：

eventAfterRender: function (event, element, view) {
  for (i = 0; i < data.eventColored.length; i++) {
    if (event.id == data.eventColored[i].events_id) {
     element.css('background-color', '#cccccc');        
    }
    else
    {
      //..etc
    }
  }
}

Ajax，Jquery将数据从数据库传递到其他函数

1 个答案: