2

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

网站/屏幕布局：
网站/屏幕布局

小提琴 1

小提琴 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);

});
4

2 回答 2

3

方法一

循环遍历您的checkoutdiv 并检查哪个是第一个拥有的 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/

方法二

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

小提琴：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");
于 2013-09-05T10:01:29.873 回答
1

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

将此添加到您的 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。

于 2013-09-05T10:10:07.687 回答