Question

我正在构建一个网页，其页面显示为滑块。每个页面都有一个唯一的ID，但都有一个名为“section”的类。现在我似乎无法做到的是，找到屏幕上显示的div的ID，“CURRENT PAGE”的ID（参见附图）。下一个/右键将水平滚动网站向右，上一个/左键将网站滚动到左侧。

网站/屏幕布局：
Website/screen layout

Fiddle 1

Fiddle 2

小提琴在每个div中都有next / prev按钮，但我想用一组next和prev按钮来控制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);

});

Answer 1

方法1

如何绕过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;
}

小提琴1：http://jsfiddle.net/rSuc6/3/

小提琴2：http://jsfiddle.net/SxBZx/3/

方法2

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

小提琴：http://jsfiddle.net/SxBZx/5/

方法3

您也可以使用active课程。

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

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

Answer 2

最简单的方法（对我来说）：

将此添加到您的html中以查看结果：

<span id="whichid"></span>

在你的js前加上这个

var page=0;

在if语句中添加：

page=page+1;
$('#whichid').text(page);

下一页并且：

page=page-1;
$('#whichid').text(page);

上一页。

您可以使用：nthoftype或：child或某些类似的选择器来获取您的网页ID。

找到滑块的当前元素

2 个答案: