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

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

ただいまの
回答率

89.63%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,881

sasanoha

score 9

前提・実現したいこと

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>

補足情報(言語/FW/ツール等のバージョンなど)

formのIDはページ毎に違います。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

こんな感じですかね。

$( function () {
    var formid = document.getElementsByTagName( 'form' )[ 0 ].id;
    var cal = [];
    $( '.calendardisp' ).each( function ( i ) {
        cal[ i ] = new JKL.Calendar( 'calid' + i, formid, 'txtbox' + i );
    } );
    $( '.daytxt' ).click(function () {
        var divnum = parseInt( ( $( this ).attr( 'name' ) ).slice( -1 ) );
        $( '.daytxt' ).each( function ( i ) {
            cal[ i ][ ( i === divnum ? 'write' : 'hide' ) ]();
        } );
    } ).change( function () {
        var divnum = parseInt( ( $( this ).attr( 'name' ) ).slice( -1 ) );
        cal[ divnum ].getFormValue();
        cal[ divnum ].hide();
    } );
} ); //(未テスト)

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/23 20: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>

    キャンセル

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

  • ただいまの回答率 89.63%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる