jquary初心者の者です。
勉強の一環で下記のようなjsを作成しました。
動きのイメージとしては下記参考URLのように入力フィールドをクリックするとリストが表示され、リストをクリックすると自動で次のリストが表示されるという内容のものです。
同じような挙動を使いまわしたいページがあるのですが、ID等を書き換えるのが大変なのでライブラリ化して、minput-area01-js~input-area03-js、submit-button-jsにあたる部分を引数で渡せば、動きが再現できるようにしたいです。
※select-box01-js~select-box03-jsは外部ファイル化する想定
ライブラリの作成方法を調べたのですが、イマイチ理解ができなかったので困っています。
完成されたソースを読んで書き方を理解したく、どなたかお手本となるソースを記述いただけませんでしょうか?
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>サンプル</title> </head> <body> <style> .modal-overray { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: .6; z-index: 1; } .wrap { width: 750px; margin: 0 auto; vertical-align: middle; position: absolute; display: table; top: 50%; left: 50%; margin-left: -375px; } .input-area01, .input-area02, .input-area03 { border: 1px solid #ccc; width: 200px; height: 30px; margin-bottom: 10px; position: relative; display: table-cell; vertical-align: middle; text-align: center; } .select-box01, .select-box02, .select-box03 { position: absolute; border: 3px solid #ccc; background-color: #fff; width: 135px; height: 50px; z-index: 999; top: -100px; text-align: left; } .select-box01 { left: 0px; } .select-box02 { left: 180px; } .select-box03 { left: 360px; } .submit-button { display: block; background-color: #ccc; padding: 10px 30px; width: 140px; text-align: center; vertical-align: middle; } .active { border-color: red; } .hide { display: none; } </style> <div id="modal-overray-js" class="modal-overray hide"></div> <form class="wrap"> <div id="input-area01-js" class="input-area01 active"> <input id="select01-Recieve" type="hidden" value=""> <p id="replace-text01-js">選択してください</p> </div> <div id="select-box01-js" class="hide"> <ul class="select-box01"> <li><a class="select-list01" data-number="01" href="#">サンプル1</a></li> <li><a class="select-list01" data-number="02" href="#">サンプル2</a></li> <li><a class="select-list01" data-number="03" href="#">サンプル3</a></li> </ul> </div> <div id="input-area02-js" class="input-area02"> <input id="select02-Recieve" type="hidden" value=""> <p id="replace-text02-js">選択してください</p> </div> <div id="select-box02-js" class="hide"> <ul class="select-box02"> <li><a class="select-list02" data-number="04" href="#">サンプル4</a></li> <li><a class="select-list02" data-number="05" href="#">サンプル5</a></li> <li><a class="select-list02" data-number="06" href="#">サンプル6</a></li> </ul> </div> <div id="input-area03-js" class="input-area03"> <input id="select03-Recieve" type="hidden" value=""> <p id="replace-text03-js">選択してください</p> </div> <div id="select-box03-js" class="hide"> <ul class="select-box03"> <li><a class="select-list03" data-number="07" href="#">サンプル7</a></li> <li><a class="select-list03" data-number="08" href="#">サンプル8</a></li> <li><a class="select-list03" data-number="09" href="#">サンプル9</a></li> </ul> </div> <div id ="submit-button-js" class="submit-button"> <a href="#">サブミット</p> </div> </form> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(function() { var $overRay = $('#modal-overray-js'); var $inputArea01 =$('#input-area01-js'); var $inputArea02 =$('#input-area02-js'); var $inputArea03 =$('#input-area03-js'); var $selectBox01 = $('#select-box01-js'); var $selectBox02 = $('#select-box02-js'); var $selectBox03 = $('#select-box03-js'); var $replaceText01 = $('#replace-text01-js'); var $replaceText02 = $('#replace-text02-js'); var $replaceText03 = $('#replace-text03-js'); var $submitButton = $('#submit-button-js') /** * showElm 表示したいエレメント * hideElm 表示したくないエレメント */ function changeActive(showElm,hideElm){ showElm.addClass('active'); hideElm.removeClass('hide'); } function changeStatic(showElm,hideElm){ showElm.removeClass('active'); hideElm.addClass('hide'); } $('#input-area01-js').on('click',function(){ $overRay.removeClass('hide'); $selectBox01.removeClass('hide'); }); $('.select-list01').on('click',function(){ var list = $(this).text(); var dataNumber = $(this).data("number"); $replaceText01.html(list); $('#select01-Recieve').val(dataNumber); changeActive($inputArea02 , $selectBox02); changeStatic($inputArea01 , $selectBox01); }); $('.select-list02').on('click',function(){ var list = $(this).text(); var dataNumber = $(this).data("number"); $replaceText02.html(list); $('#select02-Recieve').val(dataNumber); changeActive($inputArea03 , $selectBox03); changeStatic($inputArea02 , $selectBox02); }); $('.select-list03').on('click',function(){ var list = $(this).text(); var dataNumber = $(this).data("number"); $replaceText03.html(list); $('#select03-Recieve').val(dataNumber); changeStatic($inputArea03 , $selectBox03); $overRay.addClass('hide'); $submitButton.css("background-color","red"); }); }); </script> </body> </html>