原型 - 顯示一個元素，隱藏兄弟姐妹

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'); 

的優勢在這裏是適應如果利用事件冒泡名單的變化。