原型 - 显示一个元素，隐藏兄弟元素 [英] Prototype - Show one element, hide siblings

问题描述

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

当您单击 a.productImageB 时，应显示 div#ProductImagesContainer 中相应的 div#productImageB 并隐藏其兄弟.

我需要在这个项目中使用 Prototype，但我不是 javascript 天才.会知道用 jQuery 做什么，但不能用 Prototype.

<li><a href="#" class="productImageA">A</a><li><a href="#" class="productImageB">B</a><li><a href="#" class="productImageC">C</a><li><a href="#" class="productImageD">D</a>
<div id="ProductImagesContainer"><div id="productImageA">也许是 Flash 视频</div><div id="productImageB">imageB</div><div id="productImageC">imageC</div><div id="productImageD">imageD</div>

解决方案

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

隐藏一切:

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

展示你想要的:

$('ProductImageA').show();

可以在此处

找到有关原型 API 的文档

I've got this html below. I need all div's inside div#ProductImagesContainer to be hidden at startup, all but div#productImageA.

When you click a.productImageB, the corresponding div#productImageB inside div#ProductImagesContainer should be shown and it's siblings should hide.

I need to use Prototype for this project, but I'm not a javascript genious. Would know what to do with jQuery but can't do it with 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>

解决方案

My JavaScript is a bit rusty, but I believe you want the following:

Hide everything:

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

Show the one you want:

$('ProductImageA').show();

Edit: documentation on prototype's api can be found here

这篇关于原型 - 显示一个元素，隐藏兄弟元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！