点指示仅以一种方式工作

Question

我想用四个点来表示你在哪个页面上。我终于让它工作了，但只有一种方法。当我启动并将页面更改为右侧时，它可以工作，但是当我更改方向时，所有点都会使类活动页面。 我想这是我的功能，可以用不同的方式来完成解决这个问题。

function activePage() {
if (currentPage <= 2) {
$(".one").addClass("activePage");
} else if (currentPage == 3) {
$(".one").removeClass("activePage");
$(".two").addClass("activePage");
} else if (currentPage == 4) {
$(".two").removeClass("activePage");
$(".three").addClass("activePage");
} else {
$(".three").removeClass("activePage");
$(".four").addClass("activePage");
}
};
// ########################################
// function to show arrow to the LEFT
// ########################################
$(".back").on("click", function() {
currentPage -= 1;
activePage();
$(".page").hide();
$('.page-' + currentPage).fadeIn(1000);
if (currentPage == 1) {
$(".back").hide();
}
if (currentPage > 1) {
$(".back").show();
}
if (currentPage == lastPage - 1) {
$(".next").show();
}
}).hover(arrowHover, arrowHoverOut);
// ########################################
// function to show arrow to the RIGHT 
// ########################################
$(".next").on("click", function() {
currentPage += 1;
activePage();
$(".page").hide();
$(".page-" + currentPage).fadeIn(1000);
$(".back").show();
if (currentPage == lastPage) {
$(".next").hide();
}
}).hover(arrowHover, arrowHoverOut);

#navigator {
width: 100%;
height: 9px;
text-align: center;
}
#navigator .circle {
display: inline-block;
width: 8.5px;
height: 8.5px;
text-indent: -999em;
background: #fff;
border-radius: 10px;
box-shadow: 0 0 1px 1px #707173;
margin-right: 10px;
}
#navigator .circle {
background: lightgray;
transition: all 1s ease-in-out;
}
#navigator .circle.activePage {
background: limegreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="navigator">
<div class="circle one">1</div>
<div class="circle two">2</div>
<div class="circle three">3</div>
<div class="circle four">4</div>
</div>

Answer 1

您可以像下面这样改进：-

function activePage() {
$('#navigator div').removeClass('active'); // remove active class from all div first
if(currentPage <= 2) {
$(".one").addClass("activePage");
} else if (currentPage == 3 ){
$(".two").addClass("activePage");
} else if (currentPage == 4) {
$(".three").addClass("activePage");
} else {
$(".four").addClass("activePage");
}
};