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

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

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

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

jQuery

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

Q&A

2回答

2176閲覧

コンストラクタ関数で作ったライブラリのイベント発火のタイミングについて

jkita1456

総合スコア10

JavaScript

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

jQuery

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

0グッド

1クリップ

投稿2016/12/05 17:52

jsの勉強でコンストラクタ関数を使ってモーダルライブラリを作成しているのですが、
制作につまづいているのでアドバイスをいただけますでしょうか。

機能の詳細

  • 第一引数にtargetにイベントを発火させたい要素のID、第二引数のcontentにモーダルで表示したい要素のIDを指定
  • targetのクリックでイベントが発火。overlayとデリートボタン、contentのwrapper要素を生成
  • contentの要素は横幅と高さを取得し、画面中央に表示させる
  • deleteボタンとoverlayクリック時にモーダル非表示

困っていること

  • イベントを発火させる記述の方法

(Modal.prototype.showContentとModal.prototype.hideContentの部分)

備考

  • contentにimg要素などを入れた場合に、画面中央表示させることはできました。
  • headタグ内に書かれているscriptは最終的には外部ファイルとして読み込み、html側は最小限の記述で済むようにしたいです。(インスタンスの生成のみ)
<!DOCTYPE html> <html lang="ja"> <head> <link rel="stylesheet" href="index.css"> <meta charset="UTF-8"> <title>サンプル</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script> function Modal(target, content) { this.target = $(target); this.content = $(content); this.width = this.getContentWidth(); this.height = this.getContentHeight(); this.content.css({ zIndex: '999', position: 'absolute', top: '50%', left: '50%', display: 'none', marginTop: '-' + this.height / 2 + 'px', marginLeft: '-' + this.width / 2 + 'px', }); } Modal.prototype.getContentWidth = function() { var width = this.content.width(); return width; } Modal.prototype.getContentHeight = function() { var height = this.content.height(); return height; } Modal.prototype.showContent = function() { this.target.after('<div id="js-overlay" class="overlay"></div>'); this.target.after('<div id="js-button" class="button-delete"></div>'); this.content.wrap('<div class="content-wrapper"></div>'); this.content.css({ display: 'block', }); } Modal.prototype.hideContent = function() { this.target.after(''); this.target.after(''); this.content.wrap(''); this.content.css({ display: 'none', }); } </script> </head> <body> <div class="button-container"> <div id="button-left" class="button"> <p>サンプルボタンA</p> </div> <div id="content-left"> </div> <div id="button-center" class="button"> <p>サンプルボタンB</p> </div> <div id="content-center"> </div> <div id="button-right" class="button"> <p>サンプルボタンC</p> </div> <div id="content-right"> </div> </div> <script> var modalLeft = new Modal('#button-left', '#content-left'); var modalCenter = new Modal('#button-center', '#content-center'); var modalRight = new Modal('#button-right', '#content-right'); </script> </body> </html>

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

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

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

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

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

guest

回答2

0

とりあえず this.target.after(''); の部分は間違っています。「targetの次の要素に '' を追加する」という動作になり、this.target.after('<div id="js-overlay" class="overlay"></div>'); を消すという動作にはなりません。

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

【.after() | jQuery API Documentation】
http://api.jquery.com/after/

【jQueryで要素を挿入できるメソッドがたくさんあるので整理してみた | bl6.jp】
http://bl6.jp/web/javascript/organize-method-insert/

クリックイベントは $('p').on( 'click', function() {} ); $('p').click( function() {} ); のどちらかで設定出来ます。

【【jQuery】イベント発火方法 - Qiita】
http://qiita.com/kazu56/items/95f78b53baeb1170daeb

【jQuery 便利なonを使おう(on click) - Qiita】
http://qiita.com/shizuma/items/d561f37f864c3ebb5096

モーダルライブラリのよくある実装は、モーダル用のHTMLを1つだけ作って、それの中身を書き換える方法が多い気がします。質問文のコードで書かれているようにそれぞれHTMLを用意する実装も考えられますが、その場合は <div id="js-overlay" class="overlay"></div> のように id属性を使わないほうが良いです。同一ページ内に同じid属性が複数あるとHTMLの文法違反になるほか、JavaScriptで取得する際の妨げになる可能性があります。( idをキーに取得する場合に1つ目のみしか取得できない 例⇒ https://jsfiddle.net/qh0v3xh4/

投稿2016/12/07 08:43

kei344

総合スコア69364

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

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

0

イマイチなにをしたいのかわかりませんが、こういうことでしょうか?
とりあえず発火はしますが挙動についてはなんともいえません

javascript

1$(function(){ 2 var modals={}; 3 modals["button-left"]= new Modal('#button-left', '#content-left'); 4 modals["button-center"]= new Modal('#button-center', '#content-center'); 5 modals["button-right"]= new Modal('#button-right', '#content-right'); 6 $('#button-left,#button-center,#button-right').on('click',function(){ 7 modals[$(this).attr('id')].showContent(); 8 }); 9}); 10

投稿2016/12/06 02:04

yambejp

総合スコア114572

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問