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)
}
.active
の有無にかかわらず.textsection
を選択するので、(A)(B)を実行してもしなくても①②の両方が含まれます(例)。ですから「(B)の後に(C)を取得しても①の分が取得できません」とは思えないのですが、どのように確認されたのでしょうか?(D)の結果が想定と違うのかなと思いましたが、「ボタンの番号(changeNo)をINDEXとしたものを」に相当する記述がコードにありませんし、そもそも(D)の行は括弧の対応が崩れています。こちらもコードを修正していただけませんか?div
が閉じていないように見えますが、実際は大丈夫ですか? SpringBoost ではなく、jQueryの質問に見えますが、いかがですか? 前の質問と同じ質問ではないですか? (同じでしたら、より具体的なこちらの方がよい質問だと思うので、向うは削除でよいと思います)console.log()
等で中身を確認したほうが確実ではないでしょうか。