jqeury ID連番取得、カルーセル形式にしたい。

Question

前提・実現したいこと

jqeuryにて、
display:blockのスタイルが当たっている
要素を基準として、前へ、次へのクリックの挙動を作りたい。

display:blockで表示させる要素は１つのBOXだけ
次へIDを+1 前へでIDを-1したい。
08のときは01へ、08のときは01、カルーセルみたく動かしたいです。

display:blockのstyleが当たっているidの取得は、
$('div.pointBox:visible').attr('id');
でできたのですが...

IDの数字部分の抽出の仕方がよくわかりません。

他に良い方法があれば教えてください。

該当のソースコード

<div class="Box" id="anc01"></div> <div class="Box" id="anc02"></div> <div class="Box" id="anc03"></div> <div class="Box" id="anc04"></div> <div class="Box" id="anc05"></div> <div class="Box" id="anc06"></div> <div class="Box" id="anc07"></div> <div class="Box" id="anc08"></div> <ul class="pager"> <li id="prevarrow" class="pager-item"> <a></a> </li> <li id="nextarrow" class="pager-item"> <a></a> </li> </ul> <script type="text/javascript"> $(function() { $('.Box').hide(); " .Boxを表示させる処理 }); $(function() { $('#nextarrow').click(function() { var block__item = $('.Box'); $('div.Box:visible').next().css('display', 'block'); }); }); </script>

すみません、よろしくお願いいたします。

Answer 1

クラスでグルーピングしているならidで制御することはないでしょう

Comments

[yambejp]

<script>
$(function(){
$('.Box:not(:eq(0))').hide();
$('.arrow').on('click',function(e){
e.preventDefault();
var idx=$('.Box').index($('.Box:visible'));
var id=$(this).attr('id');
var len=$('.Box').length;
idx=(idx+((id=="prev")?-1:1)+len)%len;
$('.Box').hide().eq(idx).show();
});
});
</script>
<div class="Box">1</div>
<div class="Box">2</div>
<div class="Box">3</div>
<div class="Box">4</div>
<div class="Box">5</div>
<div class="Box">6</div>
<div class="Box">7</div>
<div class="Box">8</div>
<a href="#" id="prev" class="arrow">prev</a>
<a href="#" id="next" class="arrow">next</a>

Answer 2

こんな感じでいかがですか。

$('#nextarrow, #prevarrow').click(function() {
	let id = $(this).attr('id'),
		current = $('div.Box:visible'),
		n = parseInt(current.attr('id').replace('anc', ''));
		
	if (id === "nextarrow") {
		n ++;
	} else {
		n --;
	}
	
	if (n > 8) {
		n = 1;
	} else if (n < 1) {
		n = 8;
	}
	
	current.fadeOut(function(){
		$('#anc0' + n).fadeIn();
	});
});

IDの振り方を工夫すれば、もう少し簡単なコードにすることも可能です。

Comments

[yamashitasan]

こんばんは！
回答いただきありがとうございます！

IDの付け方の工夫とは、頭にOがついてるのが良くないということでしょうか...

[cerfweb]

それもありますが、yambejpさんが指摘されているように、indexを取得するやり方でもいけるので、ほかにidを振る必要がなければそちらのやり方の方がhtmlがすっきりしますね。