n要素にクリック可能なハンドルとn表示可能な要素が含まれている状況があります。
<div class="revealer">
<div class="hotspot">
<a class="handle" href="javascript:;">A</a>
<div class="reveal">
<p>Content A.</p>
</div>
<div class="reveal">
<p>Content B.</p>
</div>
</div>
</div>
「ハンドル」をクリックすると、両方の「表示」要素が表示されます。これは正常に機能します。このコードのチャンクは、作成者が望む場所ならどこでも特定のドキュメントにドロップされます。<div class="reveal"></div>別の要素の中に...を含みます。これらのリビールオブジェクトをネストする機能は合理的であり、私の場合は便利です。
私が固執しているのは、<div class="reveal"></div>ネストされた要素ではなく、直接の要素のみを処理する適切な方法です（そうでない場合は、外側のハンドルをクリックすると、ネストされたすべての表示が表示されます）。
構造例は次のとおりです。
<div class="revealer">
<div class="hotspot">
<a class="handle" href="javascript:;">A</a>
<div class="reveal">
<p>Content A.</p>
</div>
<div class="reveal">
<p>Content B.</p>
<!-- nested revealer -->
<div class="revealer">
<div class="hotspot">
<a class="handle" href="javascript:;">A</a>
<div class="reveal">
<p>Sub-content A.</p>
</div>
<div class="reveal">
<p>Sub-content B.</p>
</div>
</div>
</div>
<script type="text/javascript"> // a setup script which instantiates a Module object for this revealer, which controls all revealing </script>
</div>
</div>
</div>
<script type="text/javascript"> // a setup script, which instantiates a Module object for this revealer, which controls all revealing </script>
私はYUI2.8.2フレームワークを多用しているので、ハンドルをクリックして独自のリビールのセットを収集して表示するときにテストを実行しますが、ネストされたリビールは除外します。ネストされたリビールは、独自のインスタンス化されたモジュールによってアクションが実行される必要があります。両親ではありません。
Javascriptテストは次のとおりです。
// grab all 'reveal' elements to show
var reveals = yd.getElementsBy(function(el){
if( yd.hasClass(el, REVEAL_CLASS) && pObj.isChild( el ) ){
return true ;
}
return false;
}, null, this.root() );
// the test method above is "isChild( el )", the 'el' arg is a 'handle' inside a 'hotspot', so I have...
isChild: function( el )
{
var ancestor = yd.getAncestorBy( el, function(nestedEl){
return yd.hasClass(nestedEl, REVEALER_CLASS);
});
// ancestor is the immediate parent 'reveal' element
var forefather = yd.getAncestorBy( ancestor, function(nestedEl){
return yd.hasClass(nestedEl, REVEALER_CLASS);
});
// forefather is
if(forefather){
// Yuck yuck yuck, get rid of this dependency on a custom className :(
if(!yd.hasClass(this.getRoot(), 'revealer-nested') ){
return false ;
}
}
return true ;
},
しかし、私が集めることができるのはrevealer-nested、ネストされたrevealer要素に新しいクラス名を追加することだけです...しかし、これらのオブジェクトは独自のコンテキストに存在することになっていて、気にしないか、親の暴露者の影響を受けます。
...それがtmiではないことを願っています。詳細については、必要な質問などをお尋ねください。このモジュールをリファクタリングしている最中なので、コンテキスト情報を見逃している可能性があります。
よろしくお願いします。
編集：parentNode、childNode [x]、nextSiblingなどの子孫プロパティに依存し始めないことも非常に重要です...現在、このモジュールは「reveal」要素と「handle」要素が常駐できるという点で非常に柔軟性があります他のマークアップ内にあり、「ホットスポット」内にある限り、引き続きターゲットになります。