28010


SpringBoot＋HTML5で勉強中になります。

■HTML５

[code]

    <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>
    
[/code]

このようにしていて、activeの場合にスタイルCSSで「display: block;」となるようにしています。※①が表示されて②は非表示の状態

ここで、あるボタンが押された場合に①を非表示、②を表示にしたいのです。  
ボタンのイベント処理をjavascript側  
（A）でactiveな①を取得して、  
（B）で①をdisplay: noneにし、  
（C)ですべての①～②を取得し、  
（D）でボタンの番号（changeNo）をINDEXとしたものをdisplay: block;にして  
表示させれないかと思うのですが、（B)の後に（C）を取得しても①の分が取得できません。  
なにか足りない処理などありますでしょうか。

■javascript

[code]

    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）
    }
    
[/code]


CC BY-SA 3.0
2016-08-01T08:27:19.560
27997
2016-08-02T04:48:19.980
2016-08-01T12:06:54.930
12842
12842
question
javascript html5 spring-boot
HTML5/javascriptで表示の切り替えをしたいのですが、find()の使い方がいまいちわかりません。


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

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

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

[code]

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

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

【追記】  
コメントのとおり、動作しました。  
[サンプル](http://codepen.io/mayo31/pen/grdrVL)

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


CC BY-SA 3.0
2016-08-02T02:47:17.980
28010
2016-08-02T04:48:19.980
2016-08-02T04:48:19.980
17289
17289
27997
answer