javascript - 查找 slider 的当前元素

Question

我正在构建一个网站，其中的页面显示为 slider 。每个页面都有一个唯一的 ID，但都有一个名为“section”的类。现在我似乎无法做的是，找到正在屏幕上显示的 div 的 ID，即“当前页面”的 ID(见附图)。下一个/向右按钮会将网站水平滚动到右侧，上一个/向左按钮将网站向左滚动。

网站/屏幕布局:

Fiddle 1

Fiddle 2

Fiddle one 在每个 div 中都有下一个/上一个按钮，但我想用一组下一个和上一个按钮来控制 div 的运动。

这是我用于 Prev/next 按钮的 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);

});

Answer 1

方法一

如何遍历您的 checkout div 并检查哪个是第一个具有 margin-left: 0px; 的 div？

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/

方法二

进一步研究 Barthosz 的答案，您还可以使用全局变量来跟踪您的页面:

fiddle :http://jsfiddle.net/SxBZx/5/

方法三

您还可以使用 active 类。

每次下一个/上一个点击:

//remove current active
$(".active").removeClass("active");
//set new current to active
$(this).addClass("active");
//retrieve ID of active
$(".active").attr("id");