Javascript 原型-显示一个元素，隐藏同级元素

我在下面有这个html。 我需要在启动时隐藏所有div#ProductImagesContainer中的div，除了div#productImageA

单击a.productImageB时，应显示div#ProductImagesContainer中相应的div#productImageB，并隐藏其同级

我需要为这个项目使用原型，但我不是一个javascript天才。我知道如何使用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>

也许是flash视频
图像B
imageC
想象

我的JavaScript有点生疏，但我相信您需要以下内容：

隐藏一切：

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

显示您想要的：

$('ProductImageA').show();

---

编辑：可以找到prototype api的文档

我的JavaScript有点生疏，但我相信您需要以下内容：

隐藏一切：

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

显示您想要的：

$('ProductImageA').show();

编辑：可以在prototype的api文档中找到

以下是在prototype中实现所需功能的方法：

给定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>

也许是flash视频
图像B
imageC
想象

原型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
    });
});

//声明要在函数等中访问的全局变量。。。
var myLi=$$（'li'）//获取所有的LiA链接
var myDiv=$（'ProductImagesContainer'）。子项//获取div#ProductImagesContainer的所有子项
HIDEALBUT（空）//首先隐藏所有的div
//函数隐藏#ProductImagesContainer的子div元素，并将以下类名作为id
函数HIDEALBUT（el）{
var toShow=el；
对于（var index=0；index

首先，我们声明两个全局变量来保存所有li的a链接和div#ProductImagesContainer的子元素。然后我们创建一个名为

hidealbut（el）的函数其中它隐藏了#ProductImagesContainer的除子div元素以外的所有元素，并将类名作为id。一个参数，它是与我们需要隐藏的div元素的id名称关联的链接的类名。然后我们继续通过每个li进行oop，并添加一个onclick事件，这样每当单击li时，它都会调用
hidealbut（）并将其类名作为参数传递。
以下是实现原型中所需功能的方法：

给定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>











也许是flash视频
图像B
imageC
想象

原型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
    });
});

//声明要在函数等中访问的全局变量。。。
var myLi=$$（'li'）//获取所有的LiA链接
var myDiv=$（'ProductImagesContainer'）。子项//获取div#ProductImagesContainer的所有子项
HIDEALBUT（空）//首先隐藏所有的div
//函数隐藏#ProductImagesContainer的子div元素，并将以下类名作为id
函数HIDEALBUT（el）{
var toShow=el；
对于（var index=0；index

首先，我们声明两个全局变量来保存所有li的a链接和div#ProductImagesContainer的子元素。然后我们创建一个名为
hidealbut（el）的函数其中它隐藏了#ProductImagesContainer的除子div元素以外的所有元素，并将类名作为id。一个参数，它是与我们需要隐藏的div元素的id名称关联的链接的类名。然后我们继续通过每个li进行oop，并添加一个onclick事件，这样每当单击li时，它都会调用
hidealbut（）
并将其类名作为参数传递。
基于，下面是一个较短的版本

HTML:

这里的优点是，如果列表通过使用事件冒泡进行更改，它会进行调整。
基于，这里是一个较短的版本

HTML:

这里的优点是，如果列表通过使用事件冒泡进行更改，它会进行调整。
作为关于语义的说明，我建议使用
rel
或
data-
属性，而不是将类分配给锚定。类的问题是另一个脚本可能意外地添加了更多的类名，例如一些lightbox脚本添加了“lightbox processed”之类的名称。很明显，这会妨碍找到相应的div，因为它的ID不再匹配。@clockworkgeek，但我不想在答案上花费更多的精力；X@kjy112-别担心！“我已经为你做了。”钟表匠谢谢，但不确定@JacobJensen是否会回来检查，但我希望如此。这是他的第一篇博文，只是作为关于语义的说明，我建议使用
rel
或
data-
属性，而不是将类分配给锚。类的问题是另一个脚本可能意外地添加了更多的类名，例如一些lightbox脚本添加了“lightbox processed”之类的名称。很明显，我会的