javascript - 2 つの関数で使用する場合、変数の値を一定に保つ

Question

私が取り組んでいるプロジェクトは、単一ページの Web サイトです。

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

まず、左右の矢印と、これらの矢印の右側にあるナビゲーションです (わかりにくい場合は、リンクを参照してください)。右矢印と左矢印は .click() によって制御され、ナビゲーションは関数 navClick() によって制御されます。変数「currentPage」は、ユーザーがどのページにいるかを制御/収集する変数です。さて、これらの関数はどちらも個別に問題なく動作しますが、任意のナビゲーション アイコンをクリックすると、currentPage 変数はゼロのままで、右/左矢印が値を取得するようにその値を渡したいとします。これら 2 つの機能は連携して機能します。ユーザーが仮定の 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;
    }
});
}