jqueryドット表示は片方向にしか作用しません

Question

私はどのページを表示しているかを示す4つのドットが必要です。私はついにそれを働かせましたが、片方だけです。私は開始し、右にページを変更するが、私は方向を変更するときにすべてのドットアクティブなクラスを取得します。 私はその問題を解決するために別の方法で行うことができたのは私の機能だと思います。

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