ボタンを押すとclassが動くjs

Question

jsで対応したい事は下記の三つです。
5つBOXがあります。
それぞれのBOXは押せるようになっており、デフォルトでBOX1にactiveが入っていますが、
①クリックしたBOXへactiveを移動させたい
②次へを押したら今あるavtiveの次へ移動するようにしたい（BOX3にある場合はBOX4）（BOX5にある場合はBOX1へ戻る）
③戻るを押したら今あるavtiveの前へ移動するようにしたい（BOX1にある場合はBOX5）

どのように記述すれば良いか分かりますでしょうか。

<div>
<button type="button" name="aaa" value="aaa" class="lg-prev"><font size="3">戻る</font></button>
<button type="button" name="bbb" value="bbb" class="lg-next"><font size="3">次へ</font></button>
</div>

<div class="test active">BOX1</div>
<div class="test">BOX2</div>
<div class="test">BOX3</div>
<div class="test">BOX4</div>
<div class="test">BOX5</div>

<script>
$('.test').click(function () {
    $(this).addClass( 'active' );$(test active).removeClass( 'active' );  
});
$('.lg-next').click(function () {
    $('.active').next()　
});
$('.lg-prev').click(function () {
    $('.active').prev()　
});
</script>

Answer 1

こんな感じです

<style>
.active{color:red}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $('.lg-next,.lg-prev').on('click',function(e){
    var idx=$('.test').index($('.test.active'));
    idx+=($(this).is('.lg-prev')?-1:0)+($(this).is('.lg-next')?1:0);
    if(idx<0) idx=$('.test').length-1;
    if(idx>=$('.test').length) idx=0;
    $('.test').removeClass('active').eq(idx).addClass('active');
  });
});
</script>
<div>
<button type="button" name="aaa" value="aaa" class="lg-prev">戻る</button>
<button type="button" name="bbb" value="bbb" class="lg-next">次へ</button>
</div>

<div class="test active">BOX1</div>
<div class="test">BOX2</div>
<div class="test">BOX3</div>
<div class="test">BOX4</div>
<div class="test">BOX5</div>

.testも押せる

$(function(){
  $('.lg-next,.lg-prev,.test').on('click',function(e){
    var idx=$('.test').index($('.test.active'));
    if($(this).is('.test')) idx=$('.test').index(this);
    idx+=($(this).is('.lg-prev')?-1:0)+($(this).is('.lg-next')?1:0);
    if(idx<0) idx=$('.test').length-1;
    if(idx>=$('.test').length) idx=0;
    $('.test').removeClass('active').eq(idx).addClass('active');
  });
});

Comments

[退会済みユーザー]

教えて頂きありがとうございます。

【戻る】と【次へ】を押した時の移動はできたのですが・・・

【BOX1】～【BOX5】も押せるようになっており、そのどれかをクリックしたら、そこへactiveが移動するようにもしたいと思っているのですが。。。

[yambejp]

.testを押せるバージョン追記しました

[退会済みユーザー]

本当にありがとうございます。
対応できました。いつも本当にすみません。

Answer 2

もうちょっとスッキリしたコードにできそうだけど..

///// 検証環境 /////
JSFiddle
jQuery3.3.1

classActive = 'active';

$('.lg-next,.lg-prev,.test').click(function () {
	var active = $('.test.active');

  if($(this).hasClass('lg-next')){
    if($('.test:last').hasClass(classActive)){
      $('.test:first').addClass(classActive);
      $('.test:first').siblings().removeClass(classActive);
    }else{
      active.next().addClass(classActive);
      active.next().siblings().removeClass(classActive);
    }
  }else if($(this).hasClass('lg-prev')){
    if($('.test:first').hasClass(classActive)){
      $('.test:last').addClass(classActive);
      $('.test:last').siblings().removeClass(classActive);
    }else{
      active.prev().addClass(classActive);
      active.prev().siblings().removeClass(classActive);
    }
  }else{
    $(this).addClass(classActive);
    $(this).siblings().removeClass(classActive);
  }
});