如何隐藏/显示数组输出中的 div

Question

我生成了两个数组，一个是一组带有唯一数字类的小图像。然后有一个更大版本的图像，它具有与之关联的相同唯一编号。我已经尝试了迄今为止列出的解决方案（不是 jQuery 的），但没有一个对我有用。我也在更新我的例子，以更好地代表我想要完成的事情。正在生成的动态 id 可以是小图像的一部分，但可以添加到大图像的整个 div 容器中。

所以：

<img id="thumb_1" src="smallimage1.jpg">
<img id="thumb_2" src="smallimage2.jpg">

和

<div id="big_1" style="display:none">
  <img class="1" src="largeimage1.jpg">
  <p>Stuff</p>
</div>

<div id="big_2" style="display:none">
  <img class="2" src="largeimage2.jpg">\
  <p>Stuff</p>
</div>

我能否就根据点击的相关小图像 ID 显示每个大 div 的方式提出一些建议？当单击另一个拇指时，我需要它然后将显示切换回非活动 div 的无。

我想使用 jQuery，但我认为会有冲突（即使在“noConflict”模式下），所以我需要使用纯 javaScript 或可能的 Prototype 找出解决方案。有什么建议可以帮助我在这里顺利进行吗？

Answer 1

CSS

#bigImages img { display:none; }
#bigImages img.active { display:block; }

HTML

<div id="smallImages">
  <img class="1" src="smallimage1.jpg">
</div>

<div id="bigImages">
  <img class="1" src="smallimage1.jpg">
</div>

JS

Event.observe('smallImages','click',function(event){
  if(event.target.tagName=='IMG'){
    if($$('#bigImages img.active')[0]){
      $$('#bigImages img.active')[0].removeClassName('active'); //so you don't have to iterate through all images and conditionally hide them
    }
    var num = event.target.className;
    $$('#bigImages img.'+num)[0].addClassName('active');
  }
});

Answer 2

使用一些简单、高效、普通的 JavaScript。单个委托事件处理程序可以做到这一点。

脚本：

document.getElementById("smallImages").onclick = function(e) {
    if(e.target.tagName.toLowerCase() == 'img') {
        var imgNumber = e.target.id.split("_")[1];   
        document.getElementById("full_" + imgNumber).style.display = 'block';
    }
};

标记：

<div id="smallImages"><img id="thumb_1" alt="foo1"/></div>
<br />

<div id="bigImages"><img id="full_1" alt="foo1" style="display:none"/></div>

演示：http://jsfiddle.net/karim79/jMPcX/

Answer 3

此解决方案假设您可以为图像分配一个 id（类似于 class 属性），前缀为 big 的“大”图像和 small 的“小”图像：

不使用 jQuery： 编辑：删除了对 jQuery 的引用。

        <div id="smallImages">   
            <img id="small1" class="1" src="smallimage1.jpg" onclick="showImage(this)">
        </div>

        <div id="bigImages">   
            <img id="big1" class="1" src="largeimage1.jpg" style="display:none"> 
        </div>
<script type="text/javascript">


    function showImage(el)
        {
            var bigImageID = "big" + el.className;
            var bigImage = document.getElementById(bigImageID)
            if(bigImage)
            {
                bigImage.style.display = "";
            }
            else
            {
                //alert the user
            }
        }
    </script>

使用 jQuery：

<div id="smallImages">   
    <img id="small1" class="1" src="smallimage1.jpg">
</div>

<div id="bigImages">   
    <img id="big1" class="1" src="largeimage1.jpg" style="display:none"> 
</div> 
<script type="text/javascript">
    $("#smallImages img").click
    (
        function()
        {
            var bigImageID = "#big" + this.className;
            $(bigImageID).css("display", "");
        }
    )
</script>

Answer 4

    <div id="smallImages">
    <img class="1" src="smallimage1.jpg" onclick="viewLargImage('largeimage1.jpg');" />
    </div>
    <script type="text/javascript">
    function viewLargImage(url){
    var bigImages=document.getElementById("bigImages");
    bigImages.innerHTML='<img class="1" src="'+url+'" />';
    }
    </script>

Answer 5

除非你使用原型，否则 jQuery 不应该与其他库有任何冲突，但我会编写这两种解决方案。

jQuery:

$(document).ready(function() {
    // get small image div and select all images
    $('div#smallImages').children('img').each(function() {
        // each function iterates through all img tags inside div
        $(this).click(function() {  // attach onClick event
            // get class name
            var class_number = $(this).attr('class');

            // find appropriate big image, and get 0, in case there are more images with same class
            var big_image = $('div#bigImages').children('img.' + class_number).eq(0);

            // do the showing stuff
        });
    });
});

纯 JavaScript： 现在，这可以通过覆盖 onClick 事件或创建事件侦听器来完成。稍后是编程事物的正确方法，因为您可以为同一个对象分配多个事件侦听器。您还可以创建事件侦听器对象，但这可能是一个延伸。尽管使用事件侦听器是正确的做法，但 IE（9 版之前）对此有自己的理念。

function handleImageClick(event) {
}

var small_images = document.getElementById('smallImages').getElementsByTagName('img');
for (var i=0; i<small_images.length; i++) 
    small_images[i].onclick = handleImageClick;

虽然纯 JavaScript 看起来更简单，但它有很多缺点，所以我的建议是使用 jQuery。

Answer 6

因为没有人建议过原型方式，并且因为添加一个同等或更少功能的库只是额外的膨胀，所以这里是替代方法。

$('smallImages').observe('click', function(event){
    var image = event.findElement('img');
    if (image != document) {
        $('bigImages').select('img').invoke('hide');
        $('bigImages').select('.'+image.className).invoke('show');
    }
});

但是不建议使用className，小图像可能会通过稍后的脚本添加其他类，这可以理解，或者错误地可能有多个具有匹配类的大图像。语义方式会更像这样：

<div id="smallImages">
    <a href="#bigImage1" rel="bigImage1">
        <img src="smallimage1.jpg" />
    </a>
</div>
<div id="bigImages">
    <img id="bigImage1" src="largeimage1.jpg" />
</div>

<script type="text/javascript">
    $('smallImages').observe('click', showBigImage);
    $$('#bigImages img').slice(1).invoke('hide'); // hide all but the first
    function showBigImage(event) {
        var link = event.findElement('a[rel]');
        if (link != document) {
            $(link.rel).show().siblings().invoke('hide');
            event.stop(); // this event is within an anchor, prevent it from continuing
        }
    }
</script>

这种方式不显眼，如果 javascript 不可用，则较小的图像链接到命名的较大图像，所有这些都是可见的，因此提供了优雅的后备。当 javascript 可用时，除了第一个大图像之外的所有图像都被隐藏，确保只显示一个。使用rel 更有意义，我们可以使用findElement('a[rel]') 检查。