Skip to main content
本文に 12 文字追加
ソース リンク
kanko
  • 931
  • 8
  • 38
  • 66

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)
}

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).addClass('active');(D)
}

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)
}
編集済みの本文
ソース リンク
BLUEPIXY
  • 6,907
  • 1
  • 21
  • 34

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

■HTML5

<section<section id="testsection" th:each="testinfo, stat:${testInfos}" >
    // stat.indexが0の場合
    <div<div class="testsection active">①
        <div<div th:text="${testinfo.ラベル}" >
        <div<div th:text="${testinfo.データ}" >
    // stat.indexが0でない場合
    <div<div class="testsection">②
        <div<div th:text="${testinfo.ラベル}" >
        <div<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).addClass('active');(D)
}

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).addClass('active');(D)
}

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).addClass('active');(D)
}
ソース リンク
kanko
  • 931
  • 8
  • 38
  • 66

HTML5/javascriptで表示の切り替えをしたいのですが、find()の使い方がいまいちわかりません。

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).addClass('active');(D)
}