質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

1回答

1429閲覧

ons-carousel-itemを動的に表示させたい

T_Furuta

総合スコア25

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2019/08/07 23:59

現在、Monacaで開発をしております。
画面を進めていくと、ons-carouselを使用する画面に遷移していくのですが、この中のons-carousel-itemを動的に表示させたいのに、画面に表示されません。
try catchしようとしても、特にエラーが発生しないため、どこが悪いのかわかりませんでした。
類似の質問もあったのですが、Angularのコードだったため、出来ればjavascriptで出来るやり方を教えてほしいです。
どうかご教授お願いします。

html

1 <form name=page> 2 <ons-carousel swipeable overscrollable auto-scroll auto-refresh id="carousel" > 3 4 <div id="page_form"></div> 5 6 </ons-carousel> 7 </form>

javascript

1document.addEventListener('init', function (event) { 2 let page = event.target; 3 if (page.id == "page") { 4 page_init(); 5 } 6}); 7 8 9function page_init() { 10 try{ 11 var carousel = document.getElementById('carousel'); 12 $('#page_form').append('<ons-carousel-item>'); 13 $('#page_form').append('<ons-row>'); 14 $('#page_form').append('<ons-col>'); 15 $('#page_form').append('<ons-list class="question-area">'); 16 $('#page_form').append('<ons-list-item>'); 17 $('#page_form').append('<ons-col width="7.5em" vertical-align="top">'); 18 $('#page_form').append('<p class="highlights__pastel-blue">設問1</p>'); 19 $('#page_form').append('</ons-col>'); 20 $('#page_form').append('&emsp;'); 21 $('#page_form').append('<ons-col>'); 22 $('#page_form').append('<p>質問xxxx</p>'); 23 $('#page_form').append('</ons-col>'); 24 $('#page_form').append('</ons-list-item>'); 25 $('#page_form').append('</ons-list>'); 26 $('#page_form').append('</ons-col>'); 27 $('#page_form').append('</ons-row>'); 28 $('#page_form').append('</ons-carousel-item>'); 29 30 setImmediate(function() { 31 carousel.refresh(); 32 }); 33 34 } 35 catch(e){ 36 alert.log(e); 37 } 38 39 40}; 41 42

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mistn

2019/08/08 08:03

最終的にどのような画面になると想定しているのでしょうか? いろいろなタグを使っているせいでめちゃくちゃなことになっている印象です。 それと、appendの使い方が間違ってますね。
T_Furuta

2019/08/08 08:58 編集

misth様 最終的と言うか、下記のように設問ごとにカルーセルを作成しようと考えてます。 ちなみに、MONACAに直接HTMLを作成すると、意図した動作はします。 ```html <ons-page id="page"> <form name=page> <ons-carousel swipeable overscrollable auto-scroll id="carousel"> <!-- 設問1 --> <ons-carousel-item> <ons-row> <ons-col> <ons-list class="question-area"> <ons-list-item> <ons-col width="7.5em" vertical-align="top"> <p class="highlights__pastel-blue">設問1</p> </ons-col> &emsp; <ons-col> <p>質問xxxx</p> </ons-col> </ons-list-item> </ons-list> </ons-col> </ons-row> </ons-carousel-item> <!-- 設問2 --> <ons-carousel-item> <ons-row> <ons-col> <ons-list class="question-area"> <ons-list-item> <ons-col width="7.5em" vertical-align="top"> <p class="highlights__pastel-blue">設問2</p> </ons-col> &emsp; <ons-col> <p>質問xxxx</p> </ons-col> </ons-list-item> </ons-list> </ons-col> </ons-row> </ons-carousel-item> <!-- 設問3 --> <ons-carousel-item> <ons-row> <ons-col> <ons-list class="question-area"> <ons-list-item> <ons-col width="7.5em" vertical-align="top"> <p class="highlights__pastel-blue">設問3</p> </ons-col> &emsp; <ons-col> <p>質問xxxx</p> </ons-col> </ons-list-item> </ons-list> </ons-col> </ons-row> </ons-carousel-item> </ons-carousel> </form> </ons-page> ``` appendの使い方が違ってましたか? 勉強不足で申し訳ありません。 ただ、別のページで質問者を動的に作成しようと思い、 ```html <ons-page id="targetselect"> <div class="toolbar"> <div class="toolbar__left"> <span class="toolbar-button"> <ons-back-button style="color: white">前画面に戻る</ons-back-button> </span> </div> <div class="toolbar__center">対象者選択画面</div> <div class="toolbar__right"></div> </div> <div class="border-line-blue"></div> <div class="page__background"></div> <div class="form-wrapper"> <p class="message">対象者を選択してください。</p> <form name=targetinput> <div class="form-item"> <div class="selected-button-panel"> <div id="targetselect_form"></div> </div> </div> </form> </div> <p id="info"></p> </div> </ons-page> ``` ```javascript document.addEventListener('show', function (event) { let page = event.target; if (page.id == 'targetselect') { targetselect_show(); } }); //画面初期化 function targetselect_show() { let cmAnketoAuth = localStorage.getItem('cmAnketoAuth'); cmAnketoAuth = JSON.parse(cmAnketoAuth); let cmTargetInfo = ncmb.DataStore('cmTargetInfo'); cmTargetInfo.equalTo('chrUniqueCd', cmAnketoAuth[0]['chrUniqueCd']).order('chrSortOrder').count().fetchAll().then(function (cmTargetInfoResults) { let cmTargetInfo = cnvNifcloundToJson('cmTargetInfo', cmTargetInfoResults); localStorage.setItem('cmTargetInfo', JSON.stringify(cmTargetInfo)); $('#targetselect_form').empty(); //新規を常に一番上に表示 $('#targetselect_form').append('<ons-row class="ons-row">'); $('#targetselect_form').append('<ons-col>'); $('#targetselect_form').append('<li class="btn-square swipe-item button" title="新規" onclick="target1Click()"> 新規 </li>'); $('#targetselect_form').append('</ons-col>'); $('#targetselect_form').append('</ons-row>'); for (var i = 0; i < cmTargetInfo.length; i++) { let chrTargetName = cmTargetInfo[i]['chrTargetName'] $('#targetselect_form').append('<ons-row class="ons-row">'); $('#targetselect_form').append('<ons-col>'); $('#targetselect_form').append(`<li class='btn-square swipe-item button' title=${chrTargetName} onclick='target2Click(this)'>${chrTargetName}</li>`); $('#targetselect_form').append('</ons-col>'); $('#targetselect_form').append('</ons-row>'); } }); } ``` と、記述した時は意図した通りにHTMLが作成されたので、appendで良いと考えておりました。 ちなみに、appendの使い方のどの辺りを間違えているのかご教授お願い出来ますでしょうか。 申し訳ありませんが、よろしくお願いします。
guest

回答1

0

ベストアンサー

こちらでもちょっと試してみました。

javascript

1$('#carousel').append('<ons-carousel-item>' 2 +'<ons-row>' 3 +'<ons-col>' 4 +'<ons-list class="question-area">' 5 +'<ons-list-item>' 6 +'<ons-col width="7.5em" vertical-align="top">' 7 +'<p class="highlights__pastel-blue">設問1</p>' 8 +'</ons-col>' 9 +'&emsp;' 10 +'<ons-col>' 11 +'<p>質問xxxx</p>' 12 +'</ons-col>' 13 +'</ons-list-item>' 14 +'</ons-list>' 15 +'</ons-col>' 16 +'</ons-row>' 17 +'</ons-carousel-item>');

一番手っ取り早い修正はこれですね。ちなみにdivタグの中に入れるとうまくいかなかったのでons-carouselタグの中に入れるようにしています。


appendについてですが $('#page_form').append('<ons-carousel-item>');とした場合閉じタグも一緒に追加されてしまいます。 console.log($('#page_form').html()); を使えば確認できます。

appendはjQueryのオブジェクトなどを引数に取るので感じに追加していくことになります。

javascript

1var ons_carousel_item1 = $('<ons-carousel-item>',{text:'hoge'}); 2var ons_carousel_item2 = $('<ons-carousel-item>',{text:'fuga'}); 3var ons_carousel_item3 = $('<ons-carousel-item>',{text:'piyo'}); 4 5$('#carousel').append([ons_carousel_item1,ons_carousel_item2, ons_carousel_item3]); 6/* これでも同じこと 7$('#carousel').append(ons_carousel_item1); 8$('#carousel').append(ons_carousel_item2); 9$('#carousel').append(ons_carousel_item3); 10*/

投稿2019/08/08 10:02

編集2019/08/08 10:04
mistn

総合スコア1191

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

T_Furuta

2019/08/08 10:55

ありがとうございます! 手っ取り早い修正で上手くいきました。 ただ、ご指摘どおり引数にした方が応用が効くと思うので、下記例でも明日試してみようと思います。 結構入れ子になっているのでややこしいかもしれませんが・・・ ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問