您的位置:首页 > Web前端 > JQuery

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],不过这种古老的方式还是不适合在项目中使用,没事自己玩倒是可以。

希望上面的问题及解决方案可以为存在该问题的广大博友提供参考。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息