異なるオーバーレイ ID を処理する方法: 同じ JavaScript 関数を使用する

Question

<p>さまざまなリンクのオーバーレイを表示したいと考えています。最初のオーバーレイには画像とテキストが含まれていますが、リンク 2 をクリックすると、同じ構造で異なるコンテンツを持つオーバーレイ 2 が表示されます。希望の出力を得るのを手伝ってください。 </p> <p> <pre class="brush:js;toolbar:false;">function on() { document.getElementById("オーバーレイ").style.display = "ブロック"; } 関数 on1() { document.getElementById("overlay1").style.display = "ブロック"; } 関数オフ() { document.getElementById("オーバーレイ").style.display = "なし"; }</pre> <pre class="ブラシ:css;ツールバー:false;">.img { トランジション: トランスフォーム 5 秒のイーズインアウト。 変換: スケール(1); 変換元: 0 0; } .img:ホバー { 変換: スケール(1.25) } ＃かぶせる、 #オーバーレイ1 { 位置: 固定; 表示: なし。 幅: 100%; 高さ: 100%; トップ: 0; 左: 0; 右: 0; 下: 0; 背景色: 白; z インデックス: 77777772; カーソル: ポインタ; } ＃文章、 ＃テキスト 1 { 位置: 固定; トップ: 20%; 左: 5%。 //フォントサイズ: 50px; 色: 黒; // 変換:translate(-50%,-50%); // -ms-transform:translate(-50%,-50%); }</pre> <pre class="brush:html;toolbar:false;"><div id="overlay" onclick="off()"> <div id="テキスト"> <div style="width: 48%; float:left"> <h2>XXX</h2> <h4>ZZZ</h4> <p style="font-size:14px;"> 渓谷に住む人々の計り知れない才能を発見するのに協力してください。 </p> </div> <div style="width: 50%; float:right; margin-top:-220px; 「＞ <img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/boydB3_6881-683x1024.jpg"> </div> </div> <div style="padding:20px">

<a onclick="on()"></a> </div> <div id="overlay1" onclick="on1()"> <div id="text1"> <div style="width: 48%; float:left">

AAA

<h4>MMM</h4> <p style="font-size:14px;">渓谷に住む人々の計り知れない才能を発見するのに協力してください。 </p> </div> <div style="width: 50%; float:right; margin-top:-220px; 「＞ <img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/002boydB37683-703x1024.jpg"> </div> </div> <div style="padding:20px">

<a onclick="on1()"></a> </div> </div> </div> <a onclick="on(id)"style="font-size: 11pt;">続きを読む -></a> <a onclick="on(id)"style="font-size: 11pt;">続きを読む -></a> 1. 項目をリストします</pre> </p>

Answer 1

これを実現するにはもっと良い方法がありますが、要件に応じて、次のように、異なる ids と actions を params として同じ 1 つの関数に渡すことができます。これ＃＃＃

リーリー リーリー リーリー