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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

3740閲覧

 【Javascript】JKL.Calendarvで複数のカレンダーを利用する場合

sasanoha

総合スコア11

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/06/22 12:59

###前提・実現したいこと
JKL.Calendarv
で複数のカレンダーを利用する場合のソースをまとめたい

入力フォームの日付入力欄でJKL.Calendarvを使って
カレンダーを表示させたいのですが、

日付入力欄が1ページに1箇所~7箇所と幅があるので、
(合計200ページ位、日付入力欄が1箇所のページは120ページ位)
サンプルの書き方ではなく、日付入力欄何箇所の場合でも対応できる用にしたいです。

evalを使って作成しましたが、
evalは使わない方がよいとのことでした。

別の方法があればご教示頂ければ幸いです。
よろしくお願いします。

###該当のソースコード

<html> <head> <script src="jquery.js"></script> <script src="HolidayChk.js" language="JavaScript"></script> <head> <form id="formid1"> 日付: <input class="daytxt"name="txtbox1" type="text"><br> <div id="calid1" class="calendardisp"></div> 日付: <input class="daytxt" name="txtbox2" type="text"><br> <div id="calid2" class="calendardisp"></div> 日付: <input class="daytxt" name="txtbox3" type="text"><br> <div id="calid3" class="calendardisp"></div> </form> </body> </html>
<script type="text/javascript" language="JavaScript"> <!-- var elements = document.getElementsByTagName( "form" ); var formid= elements[0].id; var classCount = $(".calendardisp").length; for ( var i = 1, L=classCount+1; i<L; i++ ) { eval('cal' + i +'= new JKL.Calendar(("calid"+i ),(formid),("txtbox"+i))'); } //--> </script> <script type="text/javascript"> <!-- $(function () { $('.daytxt').click(function () { var divnum =parseInt( ($(this).attr('name')).slice(-1)); var classCount = $(".daytxt").length; for (var j = 1, L=classCount+1; j<L; j++ ) { if(j === divnum){ eval('cal' + j+'.write();'); }else{ eval('cal' + j+'.hide();'); } } });}); //--> </script> <script type="text/javascript" language="JavaScript"> <!-- $(function () { $('.daytxt').change(function () { var divnum =parseInt( ($(this).attr('name')).slice( -1)); eval('cal' + divnum +'.getFormValue(); '); eval('cal' + divnum +'.hide(); '); }); }); //--> </script>v ``` ###補足情報(言語/FW/ツール等のバージョンなど) formのIDはページ毎に違います。

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

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

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

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

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

guest

回答1

0

ベストアンサー

こんな感じですかね。

JavaScript

1$( function () { 2 var formid = document.getElementsByTagName( 'form' )[ 0 ].id; 3 var cal = []; 4 $( '.calendardisp' ).each( function ( i ) { 5 cal[ i ] = new JKL.Calendar( 'calid' + i, formid, 'txtbox' + i ); 6 } ); 7 $( '.daytxt' ).click(function () { 8 var divnum = parseInt( ( $( this ).attr( 'name' ) ).slice( -1 ) ); 9 $( '.daytxt' ).each( function ( i ) { 10 cal[ i ][ ( i === divnum ? 'write' : 'hide' ) ](); 11 } ); 12 } ).change( function () { 13 var divnum = parseInt( ( $( this ).attr( 'name' ) ).slice( -1 ) ); 14 cal[ divnum ].getFormValue(); 15 cal[ divnum ].hide(); 16 } ); 17} ); //(未テスト)

【.each() | jQuery 1.9 日本語リファレンス | js STUDIO】
http://js.studio-kingdom.com/jquery/traversing/each

投稿2016/06/22 14:58

kei344

総合スコア69364

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

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

sasanoha

2016/06/23 11:22

ご回答ありがとうございました。下記で動きました。大変助かりました。 .each() 便利ですね。 ありがとうございました。 <script type="text/javascript" language="JavaScript"> <!-- $( function () { var formid = document.getElementsByTagName( 'form' )[ 0 ].id; var cal = []; $( '.calendardisp' ).each( function ( i ) { cal[ (i + 1 )] = new JKL.Calendar( 'calid' +( i+1), formid, 'txtbox' +( i+1) ); } ); $( '.daytxt' ).click(function () { var divnum = parseInt( ( $( this ).attr( 'name' ) ).slice( -1 ) ); $( '.daytxt' ).each( function ( i) { cal[ (i + 1 )][ ( (i+1) === divnum ? 'write' : 'hide' ) ](); } ); } ).change( function () { var divnum = parseInt( ( $( this ).attr( 'name' ) ).slice( -1 ) ); cal[ divnum ].getFormValue(); cal[ divnum ].hide(); } ); } ); //--> </script>
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問