html内でJavaScriptで参照先をページ内にオープン。の続き。

Question

こんにちは。 https://oshiete.goo.ne.jp/qa/8966803.html で質問したものです。回答者様No.2の fujillin様のご回答で下記を頂きました。 //////////////////// sample

【状態】初期状態

//////////////////// 思っていたことはこれで適いましたが、JavaScriptを外部.jsに入れることがどうしても出来ませんでした。

fujillin · Accepted Answer

ANo2です＞複数の関数化が必要と思うのですが、関数化した場合、＞　　～～～～～＞として、呼び出し側ではどう関数を呼び出したら良いでしょうか？ hogehoge.js全体を一つの関数化して（匿名関数でもＯＫ）、それぞれの関数内で、hoge、fuga、status等を定義するようにして実行すれば可能です。（No2は一個限定なのでグルーバル変数にしているものを個別に定義するため）対象が2～3箇所であるなら、個々に設定しても大したことはないでしょうが、多くなってくると一括で処理できる方が便利ですよね。その際には、「クリックされた要素」、「対象とする要素」、「URL」などを特定できるような仕組みが必要となります。最初の回答は、多少それを意識したものでした。（thisはクリック要素、idが対象要素、urlsがurlの連想配列などになっていました）基本的にクリックイベントの発生時の処理として記述していますが、前回はHTML内に「onclick="～～"」を記述することで行っていましたが、ANo2ではスクリプト内からイベント設定を行っています。　trigger.onclick = function(){　～～　} がこれにあたります。ご質問文からは実際の使われ方がよくわからなかったので（HTML構成や複数あるのかなどなど）、手探りで（適当に）例として作成していました。 HTMLの構成にある程度のルールを決められれば、this値やidを使用しなくとも特定できるようになるので、スクリプトが多少複雑になっても、HTMLを単純化することが可能になります。また、変更が生じる毎にスクリプトを書き直さねばならないとか、ページ毎にjsファイルを作成しなければならないという不便さも解消できます。できるだけ個別の情報はHTML側に記載して、一般化した処理をスクリプトで行うようにしておく方が再利用しやすくなるでしょう。何度か説明を頂いて、だいたいの雰囲気が分かってきましたのが、勝手に想定しましたが、下記のようなものが良いのかも知れません。おまけ＞trigger.innerHTML = status==1?str[1]:str[0]; ＞などという書き方は意味不明「条件演算子（三項演算子）」と言われるもので、上記の例で言えば　if(status==1) trigger.innerHTML = str[1]; 　　else trigger.innerHTML = str[0]; と等価です。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Special_operators 【構文ルール】基本構成を以下のようなものにしています。　

　　開く　　閉じる　　

※ クラスlinkLoader要素を単位として、.open、.close、.showboxを設置 ※ .open、.closeはＡ要素で、表示用の文字列は個別に記述できます ※ .openをクリックすると.showbox内にiframeが生成され（最初のみ）　Ａ要素のhref属性が参照するurlを意味します ※ 要素の位置関係は.linkLoader内であれば自由。階層が変わってもＯＫ。 ※ linkLoaderどうしや他のクラスもネストすることはできません【HTML(サンプル)】 sample

日経新聞開く閉じる

読売新聞表示隠す

朝日新聞オープンクローズ

【hogehoge.js】（全角空白は半角に） (function(){ 　var clsCheck = function(e, c){ 　　return new RegExp("(^| )" + c + "( |$)").test(e.className); 　} 　var searchLoader = function(e){ 　　while(e && !clsCheck(e, "linkLoader")) e = e.parentNode; 　　return e; 　} 　var dispControl = function(e, sel, disp){ 　　var i, e, elms = e.querySelectorAll(sel); 　　for(i = 0; e = elms[i++];) e.style.display = disp; 　} 　var handler = function(evt){ 　　var t = evt.target || evt.srcElement; 　　if(t.nodeName != "A") return; 　　var e = searchLoader(t); 　　if(!e) return; 　　if(clsCheck(t, "open")){ 　　　var box = e.querySelector(".showbox"); 　　　if(!box) return; 　　　if(!box.querySelector("iframe")){ 　　　　var frm = document.createElement("iframe"); 　　　　frm.src = t.href; 　　　　box.appendChild(frm); 　　　} 　　　box.style.display = "block"; 　　　dispControl(e, ".open", "none"); 　　　dispControl(e, ".close", "inline"); 　　} else if(clsCheck(t, "close")){ 　　　dispControl(e, ".close", "none"); 　　　dispControl(e, ".showbox", "none"); 　　　dispControl(e, ".open", "inline"); 　　} 　　if(evt.preventDefault) evt.preventDefault(); else evt.returnValue = false; 　} 　dispControl(document, ".linkLoader .close", "none"); 　dispControl(document, ".linkLoader .showbox", "none"); 　if(document.addEventListener) { 　　document.addEventListener('click', handler, false); 　} else if(document.attachEvent) { 　　document.attachEvent('onclick', handler); 　} })();

fujillin · Answer

ANo1です。記述法を直截にして単純化しました。thisも不使用です。（1箇所限定です）　【 HTML 】 sample

開く

　【 hogehoge.js 】 var trigger = document.getElementById("hoge"); var target = document.getElementById("fuga"); var targetUrl = "http://www.goo.ne.jp/"; var str = ["開く", "閉じる"]; var status = 0; trigger.onclick = function(){ if(status == 0) target.innerHTML = ""; else if(status == 1) target.style.display = "none"; else { status = 2; target.style.display = "block"; } status = status % 2 + 1; trigger.innerHTML = status==1?str[1]:str[0]; return false; }

fujillin · Answer

こんにちは。　前回答者です。＞JavaScriptを外部.jsに入れることがどうしても出来ませんでした。そのままタグ内（タグは不要）を外部ファイル化して、読み込めば動作するはずです。　https://www.google.co.jp/search?q=CSS+font-size&ie=utf-8&oe=utf-8&hl=ja#hl=ja&q=javascript+%E5%A4%96%E9%83%A8%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB ＞また、提示された方法はボタンをクリックなのですが、私は＞開くにはここをクリック＞みたいにしてやりたいです。見た目がリンク表示の様に見えれば良いのであれば、ＣＳＳで… input[type=button] { border:none; font-size:medium; color: blue; text-decoration:underline; background-color:white; cursor:pointer; } のようなことではどうでしょうか？あと、前回答の『 statusSet() 』に関係する部分は、処理の内容が見えるようにするために説明的に付加しているものなので、実際には削除したほうが良いと思います。（コメントにもそう記したつもりでした。）どうしても、マークアップがリンク要素である必要があるのなら… 呼び出し側を　piyopiyo などとして、リンク要素内のテキストを取得するのは、value属性では取得できませんので、　node.textContent || node.innerText などを利用してください。（後述のinnerHTMLでも可）　https://developer.mozilla.org/ja/docs/Web/API/Node/textContent 　https://msdn.microsoft.com/ja-jp/library/ms533899%28v=vs.85%29.aspx テキストを書き換える場合は、例示のstatusSet()でやっているように、createTextNode()でテキスト要素を生成してappend()するか、innerHTMLなどを利用して流し込んでください。　https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML また、リンク要素の場合は、クリックするとスクリプト処理後にブラウザ本来のリンクの処理を行おうとしますので、これをキャンセルするために戻り値としてfalseを返す必要があります。あるいは、スクリプトからイベントの伝播をキャンセルすることでも良ろしいかと。　https://developer.mozilla.org/ja/docs/Web/API/Event/stopPropagation 　https://msdn.microsoft.com/ja-jp/Library/ff975460%28v=vs.85%29.aspx ＞また、thisの使い方も検索したのですが判りませんでした。 this値は、示す内容を変えられる便利な（？ or わかりにくい？）オブジェクトです。回答例での場合は、イベントをセットした（＝クリックされた）要素になります。（前回回答ではinput[type=button]、上記リンクの場合はリンク要素）　https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/this Ｃ言語の知識がおありとのことですので、書式やメソッド名は異なるものの、コード化の考え方にはたいして違いはないのではと想像します。（私はＣ言語を知りませんが…）

html内でJavaScriptで参照先をページ内にオープン。の続き。

ANo2です

ANo1です。

こんにちは。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング