原型 - 显示一个元素，隐藏兄弟姐妹

Question

我有下面的这个html。 我需要所有div的内部div＃ProductImagesContainer在启动时隐藏，除div＃productImageA外。

当您单击a.productImageB时，应该显示div＃ProductImagesContainer中相应的div＃productImageB，并且应该隐藏它的兄弟姐妹。

我需要为这个项目使用Prototype，但我不是一个javascript genious。会知道如何处理jQuery，但不能用Prototype来完成。

<ul> 
    <li> 
     <a href="#" class="productImageA">A</a> 
    </li> 
    <li> 
     <a href="#" class="productImageB">B</a> 
    </li> 
    <li> 
     <a href="#" class="productImageC">C</a> 
    </li> 
    <li> 
     <a href="#" class="productImageD">D</a> 
    </li> 
</ul> 
<div id="ProductImagesContainer"> 
    <div id="productImageA">maybe flash video</div> 
    <div id="productImageB">imageB</div> 
    <div id="productImageC">imageC</div> 
    <div id="productImageD">imageD</div> 
</div> 

Answer 1

我的JavaScript是有点生疏，但我相信你想要的以下内容：

隐藏一切：

$$('#ProductImagesContainer div').invoke('hide'); 

显示你想要的：

$('ProductImageA').show(); 

编辑：可以找到原型API的文档here

Answer 2

这里是jsfiddle达到你在原型找什么：

由于HTML：

<ul> 
    <li> 
     <a href="#" class="productImageA">A</a> 
    </li> 
    <li> 
     <a href="#" class="productImageB">B</a> 
    </li> 
    <li> 
     <a href="#" class="productImageC">C</a> 
    </li> 
    <li> 
     <a href="#" class="productImageD">D</a> 
    </li> 
</ul> 
<div id="ProductImagesContainer"> 
    <div id="productImageA">maybe flash video</div> 
    <div id="productImageB">imageB</div> 
    <div id="productImageC">imageC</div> 
    <div id="productImageD">imageD</div> 
</div> 

JavaScript原型：

//declare global variables to access within functions and etc... 
var myLi = $$('li'); //get all the li a links 
var myDiv = $('ProductImagesContainer').children; //get all the children of div#ProductImagesContainer 
hideAllBut(null); //first hide all the divs 

//function to hideAllBut the child div element of #ProductImagesContainer w/ the following classname as id 
function hideAllBut(el) { 
    var toShow = el; 
    for (var index = 0; index < myDiv.length; index++) { 
     if (myDiv[index].identify() == toShow) 
      myDiv[index].show(); 
     else 
      myDiv[index].hide(); 
    }; 
} 

//oops through each li 
myLi.each(function(myLiEl) { 
    //attached on click event for each of the hyperlinks and use the hyperlink's class name to call hideAllBut(theclassname) 
    Event.observe(myLiEl, 'click', function() { 
     hideAllBut(myLiEl.firstDescendant().className); //gets the className of first decendant based on your example 
    }); 
}); 

首先声明两个全局变量来保存所有李的一个链接和div＃ProductImagesContainer的子项。然后我们创建一个名为hideAllBut(el);的函数，它隐藏除#ProductImagesContainer w /类名为id的子div元素以外的所有元素。一个参数，它是与我们需要隐藏的div元素的id名称相关联的链接的类名。然后我们继续通过每一个单词来添加一个onclick事件，所以无论何时单击它，它都会调用hideAllBut();并将它的类名作为参数传递。

Answer 3

根据kjy112's detailed answer，这是一个较短的版本。

HTML：

<ul id="ProductImagesLinks"> 
    <li> 
     <a href="#" data-target="productImageA">A</a> 
    </li> 
    <li> 
     <a href="#" data-target="productImageB">B</a> 
    </li> 
    <li> 
     <a href="#" data-target="productImageC">C</a> 
    </li> 
    <li> 
     <a href="#" data-target="productImageD">D</a> 
    </li> 
</ul> 
<div id="ProductImagesContainer"> 
    <div id="productImageA">maybe flash video</div> 
    <div id="productImageB">imageB</div> 
    <div id="productImageC">imageC</div> 
    <div id="productImageD">imageD</div> 
</div> 

的Javascript：

$('ProductImagesLinks').on('click', 'a', function(event, element){ 
    var target = $(element.readAttribute('data-target')); 
    if (target) { 
     target.show(); 
     $$('#ProductImagesContainer > div[id!='+target.identify()+']').invoke('hide'); 
    } 
}); 
$('ProductImagesContainer').down().siblings().invoke('hide'); 

的优势在这里是适应如果利用事件冒泡名单的变化。