javascript_javascript スキルで非表示レイヤーを表示するより良い方法の分析-jsチュートリアル-php.cn

javascript_javascript スキルで非表示レイヤーを表示するより良い方法の分析

WBOY

リリース： 2016-05-16 19:00:20

オリジナル

1297 人が閲覧しました

これは Q&A ページです。設計者は、関連する質問をクリックすると、その下に対応する回答が表示されることを望んでいます。これは比較的一般的な機能です。通常の解決策は、「回答」を質問コンテナ全体の子要素として扱い、親要素のボタンをクリックして対応する子要素を展開することです。親要素と子要素間の対応を通じて、タイトルと回答を一致させます。

ただし、HTML を記述する際にスクリプトは考慮されていないため (要件は後から追加されました)、回答とタイトルの間に親子関係はありません。 htmlコードは以下の通りです。

したがって、回答とタイトルを一致させるには別の方法が必要です。要素の位置を把握することで要素を照合できます。つまり、最初のタイトルはシーケンス全体の最初の回答に対応し、2 番目のタイトルは 2 番目の回答に対応する必要があります。このようにして、HTML 構造に関係なく、対応関係を制御できます。

コードをコピーコードは次のとおりです:

番号タイトル編集者/質問者

1gt;小規模店舗を開きたい場合、料金を支払う必要がありますか?gt; ;< a href="#" title="" class="openLink">

カスタマーサービス

2開きたいストアは料金を支払う必要がありますか? ; /span>

この段階では料金は発生しませんので、心配しないでください。

付加価値サービスの機能モジュールに加えて。カスタマーサービス

スクリプトの説明: openLink アイコンをクリックすると、openLink と同じ順序の回答が表示されます。ここでは、onclick イベントをクロージャ内に配置し、for ループが終了するまで待ってからアクティブ化する必要があります。そのようなクロージャが存在しない場合は、どの openLink をクリックしても、openLink.length の値が表示されます。

コードをコピーコードは次のとおりです。

document.getElementsByClassName = function( eleClassName)

{ 
var getEleClass = [];//配列を定義します
var myclass = new RegExp("\b" eleClassName "\b");//正規表現オブジェクトを作成します
 var elem = this.getElementsByTagName("*");//ドキュメント内のすべての要素を取得します 
for(var h=0;h{ 
var class = elem[ h ].className;//クラス オブジェクトを取得します
if (myclass.test(classes)) getEleClass.push(elem[h]);//通常の比較、目的の CLASS オブジェクトを取得します
} 
 return getEleClass;//配列を返します 
} 
//これは私が使用しているクラスをキャプチャするメソッドです。これをコピーすればOKです。 

varanswer = document.getElementsByClassName("answer"); 
var openLink = document.getElementsByClassName("openLink"); 
var closeLink = document.getElementsByClassName("closeLink"); >
for (i = 0; i{ 
( 
function(i){ 
openLink[i].onclick = function (){ 
var j = i; 
answer[j].style.display = "ブロック" 
} 
closeLink[i].onclick = function (){ 
var j = i; Answer[j].style.display = "none" 
} 
} 
)(i); 
}