SpringBoot+HTML5で勉強中になります。
■HTML5
<section id="testsection" th:each="testinfo, stat:${testInfos}" >
// stat.indexが0の場合
<div class="testsection active">①
<div th:text="${testinfo.ラベル}" >
<div th:text="${testinfo.データ}" >
// stat.indexが0でない場合
<div class="testsection">②
<div th:text="${testinfo.ラベル}" >
<div th:text="${testinfo.データ}" >
</section>
このようにしていて、activeの場合にスタイルCSSで「display: block;」となるようにしています。※①が表示されて②は非表示の状態
ここで、あるボタンが押された場合に①を非表示、②を表示にしたいのです。
ボタンのイベント処理をjavascript側
(A)でactiveな①を取得して、
(B)で①をdisplay: noneにし、
(C)ですべての①~②を取得し、
(D)でボタンの番号(changeNo)をINDEXとしたものをdisplay: block;にして
表示させれないかと思うのですが、(B)の後に(C)を取得しても①の分が取得できません。
なにか足りない処理などありますでしょうか。
■javascript
function change(changeNo) {
// 言語
var activeInfo = $('#testsection').find('.testsection.active');(A)
activeInfo.removeClass('active');(B)
var nonactiveInfo = $('#testsection').find('.testsection');(C)
$(nonactiveInfo[changeNo]).addClass('active');(D)
}