【发布时间】：2011-01-11 23:18:37
【问题描述】：
我有一个元素包含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 元素添加一个新的类名revealer-nested...但我真的不想这样做，因为这些对象应该存在于它们自己的上下文中，而不关心或受父级揭示者的影响。
...我希望这不是 tmi，请询问任何必需的问题等以获取更多信息 - 我可能错过了一些上下文信息，因为我正处于重构此模块的中间。
提前非常感谢。
编辑： 同样重要的是，我不要开始依赖诸如 parentNode、childNode[x]、nextSibling 等后代属性......因为目前这个模块非常灵活，因为它的“显示”和“处理”元素可以驻留在其他标记并且仍然是目标 - 只要在“热点”内找到它们。
【问题讨论】：
-
Hrm，代码着色对我来说看起来不太合适，而且我看不到任何标记错误 - 但我确实手动输入了 HTML 的删节块 - 请放心，它是有效的代码在我的情况下。
-
也许我理解错了，但您只需要显示与
handle处于同一级别（因此，兄弟姐妹）的reveal对象。不过我不知道 YUI。 -
你是对的，我没有在问题中表达这一点 - 但实际上我已经以这样一种方式构建了我的模块，即显示元素和句柄理论上可以位于 x 级别的标记内并且仍然被正确定位。所以我使用 YUI 只抓取我需要的元素，而不是依赖于 parentNode、nextSibling 等节点定位。我将把它添加到问题中。
标签： javascript module filter generics descendant