swipe.js工具包实现手机web滑动轮播效果存在jQuery对象不能使用问题并解决(个人项目经验)
2016-03-27 14:06
1096 查看
在做公司首页轮播图效果的时候,我采用了网上推荐的swipe.js工具包,在使用的过程中一直报错,并不能实现功能,通过追踪代码报错的位置,最终找到了解决方案,其实就是swipe包中的Swipe方法调用第一个参数支持jQuery对象的原因,只要将该参数转换成dom对象即可。下面演示具体出现的错误和解决的整个过程。
出现问题,采用chrome浏览器查看错误的位置:
从这张图中看的出来是在swipe.js包中的36行出现问题,那就接着看下面的图:
从这就看的出来是element调用获取children时出现undefined问题,那就接着追踪element,继续看下图:
element元素是通过container获取的,通过图中的分析,就可以得到container是jQuery对象,使用dom对象的方法获取子元素,赋值给element,这个肯定是不成立的,导致element是undefined,进而导致36行slides = element.children出现错误。
container为什么是jQuery对象是因为我再获取标签对象的时候用的是下面的代码,所以会出现这样问题:
解决方案就是在传入的test后面加上[0],表示转换为dom对象,如下正确代码:
这里还可以使用另一种解决方案,使用使用dom对象获取需要传入的对象,如下代码:
var test = document.getElementById(“test”);
这个时候直接传入test即可,无需加[0],不过这种古老的方式还是不适合在项目中使用,没事自己玩倒是可以。
希望上面的问题及解决方案可以为存在该问题的广大博友提供参考。
出现问题,采用chrome浏览器查看错误的位置:
从这张图中看的出来是在swipe.js包中的36行出现问题,那就接着看下面的图:
从这就看的出来是element调用获取children时出现undefined问题,那就接着追踪element,继续看下图:
element元素是通过container获取的,通过图中的分析,就可以得到container是jQuery对象,使用dom对象的方法获取子元素,赋值给element,这个肯定是不成立的,导致element是undefined,进而导致36行slides = element.children出现错误。
container为什么是jQuery对象是因为我再获取标签对象的时候用的是下面的代码,所以会出现这样问题:
解决方案就是在传入的test后面加上[0],表示转换为dom对象,如下正确代码:
这里还可以使用另一种解决方案,使用使用dom对象获取需要传入的对象,如下代码:
var test = document.getElementById(“test”);
这个时候直接传入test即可,无需加[0],不过这种古老的方式还是不适合在项目中使用,没事自己玩倒是可以。
希望上面的问题及解决方案可以为存在该问题的广大博友提供参考。
相关文章推荐
- jQuery异步框架探究3:jQuery.when方法
- jQuery选择器总结
- jQuery选择器
- jQuery 事件中stoppropagation和stopimmediatepropagation的区别
- jQuery 简单归纳总结
- jquery随笔小特效之唯品会顶部菜单栏
- jquery $(document).ready() 与window.onload的区别
- jquery banner广告图片左右切换,模仿实现支付宝广告效果
- jQuery
- jquery 使用方法
- Jquery - Select 和 Checkbox 、Textarea的操作
- 《JQuery实战》第1-3章
- ASP.NET中JQuery+AJAX调用后台
- jquery实现图片轮播效果
- PhoneGap&jQuery Mobile应用开发环境配置(For Android)
- jquery1.9+ ajax加载页面的时候出现Syntax error, unrecognized expression
- 表单编程和jquery
- Jquery学习
- Jquery选择器使用方法
- jquery学习总结