Question

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

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

我需要为这个项目使用Prototype，但我不是一个javascript geious。会知道如何处理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
    });
});

首先，我们声明两个全局变量来保存所有li是div＃ProductImagesContainer的链接和子节点。然后我们创建一个名为hideAllBut(el);的函数，它隐藏除#ProductImagesContainer的子div元素以外的所有元素作为id。一个参数，它是与我们需要隐藏的div元素的id名称相关联的链接的类名。然后我们继续浏览每个li并添加一个onclick事件，因此每当点击li时，它将调用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');

这里的优点是，如果列表通过利用事件冒泡而改变，它就会适应。

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

3 个答案: