0

我正在做的项目是一个单页网站：

http://50.87.144.37/~projtest/team/design/yellowmedia/

有两个东西，首先是左右箭头，然后是这些箭头右侧的导航（如果不清楚请访问链接）。右箭头和左箭头由 .click() 控制，导航由函数 navClick() 控制。变量“currentPage”是控制/收集用户所在页面的变量。现在，这两个函数单独工作都很好，但是假设，您单击任何导航图标，currentPage 变量保持为零，我想要做的是传递它的值，以便右/左箭头获取值，这样这两个功能可以一起工作。如果用户单击假设，第 3 个导航图标，则 currentPage 应该变为 2，依此类推。

您可以通过单击最后一个显示地图图像的导航图标来测试此“错误”，然后单击右箭头图标 6 次，这将使其停用。发生的事情是，当您单击时 currentPage 从 0 增加到 6，而单击第 6 个导航图标时应该是 6。

在第 1 页：currentPage = 0
在第 2 页：currentPage = 1
在第 3 页：currentPage = 2
在第 4 页：currentPage = 3
在第 5 页：currentPage = 4
在第 6 页：currentPage = 5

var currentPage = 0;

$(document).ready( function() {

navclick();

$('.rightArrow').stop().click(function () {
currentPage++;

if(currentPage > $(".section").length - 1){
   currentPage = $(".section").length - 1;
}

$('.section').eq(currentPage-1).animate({
    left: '-100%'
}, 200);
$('.section').eq(currentPage).animate({
    left: '0%'
}, 200);
$('.section').eq(currentPage-1).animate({
    left: '-100%'
}, 200);}

});

$('.leftArrow').click(function () { 

currentPage--;

if(currentPage < 0){
   currentPage = 0;
   $('.leftArrow').removeClass('leftArrow').addClass('leftDeactive');
}


$('.section').eq(currentPage+1).animate({
    left: '-100%'
},  200);
$('.section').eq(currentPage).animate({
    left: '0%'
},  200);

$('.section').eq(currentPage+1).animate({
    left: '-100%'
},  200);

});

}

function navclick(){

var a=2;
$('.clickNav').click(function(){
var targetId = $(this).attr('href');

$(targetId).animate({
    left: '0%'
},  500);

$(targetId).siblings('.section').animate({
    left: '-100%'
},  500);

$(targetId).css('z-index',a);
a = a+1;



if(currentPage>5){
    currentPage=5;
    } else if(targetId =="#section-5"){
    currentPage = 6;
    }
});
}
4

1 回答 1

1

每次单击导航按钮时尝试更新变量：

function navclick(){

var a=2;
$('.clickNav').click(function(){
var targetId = $(this).attr('href');
currentPage = targetId.substring(9);   //Get your new page without string "section-"

$(targetId).animate({
    left: '0%'
},  500);

你也可以尝试这样的事情。我认为它更简单和优化（即使它应该更优化）：http: //jsfiddle.net/3TxjF/3/

于 2013-09-06T14:14:40.543 回答