我正在构建一个网站,其页面显示为 slider 。每个页面都有一个唯一的 ID,但都有一个名为“section”的类。现在我似乎无法做的是,找到屏幕上显示的 div 的 ID,即“当前页面”的 ID(参见附图)。下一个/向右按钮会将网站水平滚动到右侧,上一个/左按钮会将网站向左滚动。
网站/屏幕布局:
fiddle 在每个 div 内都有下一个/上一个按钮,但我想用一组下一个和上一个按钮来控制 div 的运动。
这是我用于上一个/下一个按钮的 Javascript:
$('.next').stop().click(function () {
if($(this).closest('.checkout').next().css('display') == 'none'){
alert('a');
}else{
$(this).parent().animate({
marginLeft: '-100%'
}, 500);
$(this).parent().next().animate({
marginLeft: '0%'
}, 500);
$(this).parent().animate({
marginLeft: '-100%'
}, 500);
}
});
$('.prev').click(function () {
$(this).stop().parent().animate({
marginLeft: '0%'
}, 500);
$(this).stop().parent().prev().animate({
marginLeft: '0%'
}, 500);
$(this).stop().parent().animate({
marginLeft: '0%'
}, 500);
});
最佳答案
方法一
如何循环遍历您的 checkout
div 并检查哪个是第一个具有 margin-left: 0px;
的?
function getCurrentPage(){
var current = "";
$.each($(".checkout"), function(){
if($(this).css("margin-left") == "0px"){
current = this.id;
return false;
}
});
return current;
}
fiddle 1:http://jsfiddle.net/rSuc6/3/
fiddle 2:http://jsfiddle.net/SxBZx/3/
方法2
进一步研究 Barthosz 的答案,您还可以使用全局变量来跟踪您的页面:
fiddle :http://jsfiddle.net/SxBZx/5/
方法3
您还可以使用事件
类。
每次下一个/上一个点击时:
//remove current active
$(".active").removeClass("active");
//set new current to active
$(this).addClass("active");
//retrieve ID of active
$(".active").attr("id");
关于javascript - 查找 slider 的当前元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18633186/