第92篇一对多之学生完成作业加红点及红点变数字

关键词：学生完成作业加红点, 红点变数字

一、一对多

1.1学生完成作业

代码实现了，具体如下：

1）学生点提交作业需要个单击函数finWork()如下：--------------student.html

<a href="javascript:void(0);"class="tool-bottom-btn" id="pushOperation"

οnclick="finWork()"><span></span>提交作业</a>

finWork()如下：

//学生完成作业----向老师端发消息

function finWork(){   

  connection.send({

       'mobileName':mobileName,

       'video_Id':connection.localMediaStreamId,

       'finWork':true

 

   });

}

2）老师收到消息后，如下处理：

   //学生完成作业老师端动态追加提示消息+并且完成作业图片换成加红点的

  if(event.data.mobileName && event.data.finWork){

       var mobName = event.data.mobileName;

       finVAid = event.data.video_Id;

       finWokId = 'fin'+finVAid;                       

                  $("#finHomWk").append("<liid = '" +finWokId+ "' class='clearfix'><img

src='/static/img/end_s.png' /><span>"+mobName+"完成作业</span><a

style='color:red;' οnclick='getWBredR(finVAid,finWokId)'>查看作业</a></li>");

 

                  $("li#homework").find("span").css("background-position","38px -264px");

}

注：老师收到消息后，在完成作业的列表中追加一条，里面有学生名字。并且给了一个单击函数，方便老师查看作业。

3）getWBredR(finVAid,finWokId)

   //拉学生白板+取消完成作业上面的红点-----------------------------------3.1.2

   function getWBredR(VAid,id) {

       connection.send({

                          stuIdVAPri:VAid,

           stopTimer:true

      });

       $("#"+id).remove();

 

       //只要有学生作业没处理，红点就存在

       if($('#finHomWk').children('li').length<=0){

               //没红点

          $("li#homework").find("span").css("background-position","38px -219px");

       }else{

          //有红点

          $("li#homework").find("span").css("background-position","38px -264px");

       }

}

注：这个函数有两个参数，一个是视频id，一个是fin+视频id，其中有一个查元素子元素数目的方法需要记一下：$('#finHomWk').children('li').length，通过这，可以判断学生提交作业的数目，进一步判断是否要红点图片。

1.2 红点变数字

1）描述

  需求说，红点不好，改成数字，动态加载就好了，一目了然。

2）实现了，代码如下：

   //学生完成作业老师端动态追加提示消息+动态生成红点数目

   if(event.data.mobileName && event.data.finWork){     

       var mobName = event.data.mobileName;

       finVAid = event.data.video_Id;

       finWokId = 'fin'+finVAid;                       

                  $("#finHomWk").append("<liid = '" +finWokId+ "' class='clearfix'><img

src='/static/img/end_s.png' /><span >"+mobName+"完成作业</span><a

 style='color:red;' οnclick='getWBredR(finVAid,finWokId)'>查看</a></li>");

                  //动态更新红点数目

        var WkRedNum =$('#finHomWk').children('li').length;

       $("#WkRed-span").text(WkRedNum);

}

注：学生提交作业时，计算有多少li标签，并更新到span的text值中。

getWBredR(finVAid,finWokId)中：

    //拉学生白板+作业上面的红点动态更新-----------------------------------3.1.2

    function getWBredR(VAid,id) {

        connection.send({

                          stuIdVAPri:VAid,

            stopTimer:true

       });

        $("#"+id).remove();

        //动态更新红点数目

        var WkRedNum =$('#finHomWk').children('li').length;

      $("#WkRed-span").text(WkRedNum);

   }

2017年4月2日星期日