jquery - 点指示仅适用于一种方式

Question

我希望有四个点来指示您所在的页面。我终于得到了它，但只有一种方式。当我开始并向右更改页面时，它可以工作，但是当我改变方向时，所有的点都获得类activePage。 我想这是我的功能，可以用不同的方式来解决这个问题。

ItemsSource.Count()

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;
}

Answer 1

您可以改进如下： -

int sum = num1 + num2;