前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery 插件 的this 指向问题(实战)

jQuery 插件 的this 指向问题(实战)

作者头像
用户7293182
发布2022-01-17 21:43:39
1.1K0
发布2022-01-17 21:43:39
举报
文章被收录于专栏:jQuery每日经典

daterangepicker 是一个JavaScript组件,用来选择日期。

资源直接搜索 daterangepicker 即可,当然好看的样式可以基于Bootstrap。

官网:http://www.daterangepicker.com/

搭建项目环境

daterangepicker js 基于 jQuery 和 moment

css基于bootstrap

html代码

输入框选择日期

label 用于显示选中的时间

button1 清除 label 时间

button2 重新赋值 label 时间

js代码实现功能

1. input 使用插件,并设置回调函数用来将控件选中的值赋值给 label。具体使用方法查看官网,不是本文重点。

代码语言:javascript
复制
$("input[name=callbackDate]").daterangepicker(
  {
     singleDatePicker: true, //只显示单日期选择
  },function(start, end, label) {
      var date = new Date(start);
      $("#showTime").html("label time: " + 
         date.getFullYear() + "年" +
         (date.getMonth() + 1) + "月" +
         date.getDate() + "日")
  }
)

2. button1点击事件设置

代码语言:javascript
复制
$("#clearLabelTime").click(function(){  {
     $("#showTime").html("label time: ");
}

3. button2点击事件设置

请问!请问!!请问!!!如何实现?

一个办法,重新获得 input 的时间,写个方法。如果是这样的话,和 this 有毛线关系。

既然是重新设置 label 的时间,那之前肯定是设置过的,什么时候设置的呢?在点击时间控件后调用回调函数。(哦,对了,还有一个方法是重新点击时间控件上的时间,相当于重新选择一次)。

那么插件有没有提供一个方法是:在时间选择以后,重新调用函数的呢?查看源码(别问为什么,官网没有提供,但是我不相信他没有写这个方法)后找到:

其中 cb 就是回调函数绑定到 DateRangePicker 对象上的方法。this 在对象中的指向问题可以看第一篇文章介绍。

如果真是这样,那就很好解决了,按照正常人的思路,将调用 daterangepicker 的地方设置变量,然后调用 notify 方法就哦了。我也这么试了:

代码语言:javascript
复制
var datepicker = $("...").daterangepicker({
  ...
  },function(...){
   ...
  }
)
代码语言:javascript
复制
$("#setLabelTime").click(function(){  {
    datepicker.notify();
}

但是浏览器报错没有 notify 方法。

输出 datepicker 对象一看,#¥%……&

datepicker对象居然是一个 jQuery 对象$("input[...]")。

what???

继续看源码:

这段代码是调用的入口,返回this,this是什么呢?

$.fn.这是在扩展 jQuery 对象,daterangepicker是扩展的一个方法,(对象方法中的this指向谁的问题同样参考上一篇文章)。this 指向 jQuery对象$("input[...]")。

到了这时候应该怎么办?放弃吗?怎么可能。

看第六行代码,new了一个DateRangePicker对象,那如果我们能想办法拿到这个对象,是不是就万事大吉了?开干,修改这段代码如下:

重新跑代码,哦了。

关于插件作者代码

当然了,代码中返回什么对象,返回哪个对象的问题,我不明白作者是怎么想的。如果是我来写插件,肯定不会返回一个jQuery对象,因为没什么必要。然而代码中有很多方法是绑定在DateRangePicker原型上的。。。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2017-06-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 jQuery每日经典 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档