这是我第一次完全从头开始编写一些jQuery代码,所以除了我在某处出错的事实之外,我也不确定这是否是做我想做的事情的最佳方式。 来了!
我正在使用jQuery Swipe.js来控制移动网站上的滑块。滑块包含 3 个div。我还有一些左右箭头按钮,用户可以单击这些按钮来调用滑动功能。
我想在调用滑动操作时隐藏/显示一些div,具体取决于视口中当前的内容。我尝试使用一个简单的变量 i
来做到这一点,根据用户正在查看的当前页面添加/减去该变量。
调用滑动.js函数的原始脚本只是var slider = new Swipe(document.getElementById('slider'));
我编写的脚本代码是这样的://EDIT:在查看滑动文档后更新
var slider = new Swipe(document.getElementById('slider'), {
callback: function() {
var pageNumber = slider.getPos();
if (pageNumber = 0) {
$(".leftArrow").css("display", "none");
$("footer#about").css("display", "none");
$("footer#adFooter").css("display", "none");
}
else if (pageNumber = 1) {
$(".leftArrow").css("display", "inline");
$("footer#adFooter").css("display", "inline");
$("footer#about").css("display", "none");
}
else if (pageNumber = 2) {
$("footer#adFooter").css("display", "none");
$("footer#about").css("display", "inline");
}
}
});
HTML 代码是这样的:
<a href='#' onclick='slider.prev(); return false;'><img class="leftArrow" src="img/arrow_right.png" alt="Left Nav Arrow"/></a>
<a href='#' style="" onclick='slider.next(); return false;'><img class="rightArrow" src="img/arrow_right.png" alt="Right Nav Arrow"/></a>
我无法确切地看到我在这里出错的地方,但显然整个事情不起作用。思潮?
你没有说你遇到了什么问题,但有一个问题很清楚。 i
既可以是-1
的,也可以是3
的。 将两个 if 语句更改为表示i>0
和i<2
,并且不要像现在这样包含=
。