0

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)
}
5
  • 1
    (C)の記述は .active の有無にかかわらず .textsection を選択するので、(A)(B)を実行してもしなくても①②の両方が含まれます()。ですから「(B)の後に(C)を取得しても①の分が取得できません」とは思えないのですが、どのように確認されたのでしょうか?(D)の結果が想定と違うのかなと思いましたが、「ボタンの番号(changeNo)をINDEXとしたものを」に相当する記述がコードにありませんし、そもそも(D)の行は括弧の対応が崩れています。こちらもコードを修正していただけませんか?
    – unarist
    Commented 2016年8月1日 11:19
  • 1
    いくつか質問です。div が閉じていないように見えますが、実際は大丈夫ですか? SpringBoost ではなく、jQueryの質問に見えますが、いかがですか? 前の質問と同じ質問ではないですか? (同じでしたら、より具体的なこちらの方がよい質問だと思うので、向うは削除でよいと思います)
    – mjy
    Commented 2016年8月1日 12:14
  • コメントありがとうございます!すみません。$(nonactiveInfo[changeNo]).addClass('active');(D)部分を修正しました。また、確認方法としては(A)、(B)間にvar len = activeInfo.length;をいれ、ブラウザでF12にてブレイクかけて確認したところ、1となっていた次第です。
    – kanko
    Commented 2016年8月1日 12:40
  • それは(A)で取得した件数を確認するコードですから、①の分だけカウントして1になるのは正しいのでは?「(‌​B)の後に(C)を取得しても①の分が取得できません」という話なのですから、(C)で取得した件数を確認するべきでしょうし、件数だけでなくデバッガや console.log() 等で中身を確認したほうが確実ではないでしょうか。
    – unarist
    Commented 2016年8月1日 14:01
  • コメントありがとうございます!すみません、何度かブラウザのキャッシュを削除し、起動しなおすことで期待値を取得できました。お騒がせしました。また、console.log() なども利用していきたいと思います!
    – kanko
    Commented 2016年8月2日 11:33

1 件の回答 1

0

$(nonactiveInfo[changeNo])というセレクタでは特定できないと思います。
いったんセレクタ文字列を変数に入れて、それを$(変数)とした方がいいでしょう。

しかも、やりたいことを実現するのには.find()を使う必要がなさそうな気がします。
もっとシンプルに考えてみてはどうでしょう?

①あるボタンが押されたとき、change()を実行する。
 何個めの.testsectionを.activeにするか引数を渡す。
②.active(何個めかは関係ない)のclassを外す。
③引数の番号の.testsectionにclassを追加する。

function change(changeNo) {
    $('.testsection.active').removeClass('active');
    var nonactiveInfo = '.testsection:nth-child(' + changeNo + ')';
    $(nonactiveInfo).addClass('active');
}

ただ、:nth-childは連続した兄弟要素の中での順序で指定することになるので、
提示のHTMLとは異なりほかの場所にも同じclassがあったりするなら
また別のセレクタにしないといけませんね。

【追記】
コメントのとおり、動作しました。
サンプル

じゃあ何がいけないのかな…と考えると、引数が合っていないのかな?
・0または1以外の存在しないindexを渡してしまっている?
・関係ない文字列やオブジェクトを渡してしまっている?

3
  • nonactiveinfo がjQueryオブジェクトの時、nonactiveinfo[changeNo]とすることで changeNo 番目のDOM要素が取得できますから、それを$() に渡せばその要素を操作することはできますね。
    – unarist
    Commented 2016年8月2日 4:17
  • 失礼しました。仰る通りで、質問者様の提示のコードどおりで操作できました。 Commented 2016年8月2日 4:45
  • コメントありがとうございます!すみません、何度かブラウザのキャッシュを削除し、起動しなおすことで期待値を取得できました。お騒がせしました。
    – kanko
    Commented 2016年8月2日 11:33

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。