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

我有两个数组正在生成，一个是一组小图像，附带一个唯一的数值类。然后是一个更大版本的图像，具有与之关联的相同唯一编号。到目前为止，我已经尝试了列出的解决方案（不是jQuery的），但没有一个对我有效。我也在更新我的例子，以更好地代表我正在努力实现的目标。正在生成的动态id可以是小映像的一部分，但可以添加到大映像的整个div容器中

因此：

及

东西

\
东西

我是否可以根据单击哪个关联的小图像id，对显示每个大div的方法提出一些建议？当单击另一个拇指时，我需要它将非活动div的显示切换回无

---

我想使用jQuery，但我认为会有冲突（即使是在“noConflict”模式下），所以我需要使用普通javaScript或原型找出解决方案。有什么建议可以帮助我在这里展开讨论吗？

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

不使用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>

函数showImage（el）
{
var bigImageID=“big”+el.className；
var bigImage=document.getElementById（bigImageID）
如果（大图像）
{
bigImage.style.display=“”；
}
其他的
{
//提醒用户
}
}

使用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>

$（“#smallImages img”）。单击
(
函数（）
{
var bigImageID=“#big”+this.className；
$（bigImageID）.css（“显示”，“显示”）；
}
)

函数viewLargImage（url）{
var bigImages=document.getElementById（“bigImages”）；
bigImages.innerHTML=''；
}

使用一些简单、高效、朴素的老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>

---

演示：

除非您使用prototype，否则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;

函数handleImageClick（事件）{
}
var small_images=document.getElementById（'smallImages'）.getElementsByTagName（'img'）；
对于（var i=0；i，因为没有人提出原型方法，而且因为添加一个功能相同或能力较差的库只是额外的膨胀，所以这里是替代方案

$('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>


$（'smallImages'）。观察（'click'，showBigImage）；
$$（'#bigmages img'）。切片（1）。调用（'hide'）；//隐藏除第一个以外的所有图像
函数showBigImage（事件）{
var link=event.findElement（'a[rel]'）；
如果（链接！=文档）{
$（link.rel）.show（）.sides（）.invoke（'hide'）；
event.stop（）；//此事件在锚内，请阻止它继续
}
}

这种方式是不引人注目的，如果javascript不可用，则较小的图像链接到指定的较大图像，所有这些图像都可见，因此提供了一个优雅的回退。当javascript可用时，除第一个较大的图像外，所有图像都被隐藏，确保只显示一个。使用
rel
更有意义，我们可以使用查看
findelelement（'a[rel]'）
CSS

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

HTML

为什么你认为《无冲突》会有冲突模式？这些是包含HTML的字符串数组还是DOM节点数组？@Pointy，因为每当我尝试在本网站构建中使用jQuery时，它都会破坏使用原型构建的核心脚本。如果这是唯一的方法，我愿意继续尝试，但我希望有另一种方法solution@Hemlock数组的输出是类似于w的html这是我上面的例子哦，我只是好奇-除非你完全绝望，否则我不愿意建议将jQuery添加到原型网站。这是使用jQuery的，询问者明确表示他不想使用。Thx。我首先起草了一份没有jQuery的文件，然后不知怎的复制了一份有jQuery的文件。：@Cybernate-你的“不使用jQuery”仍然使用jQuery。
$（bigImageID）.css（“display”，又是“）
Thx.。我想该喝杯咖啡了……）：）Hi Cybernate.。感谢您的回复。当您喝完咖啡后，您是否介意拿出您原来的jQuery解决方案（使用.attr方法）和其他人一起。我想玩尽可能多的可能性谢谢你！我想这正是我需要的。你能告诉我，在展示新的“完整”之前，我如何先隐藏显示的任何“完整”吗？
$('smallImages').observe('click', function(event){
    var image = event.findElement('img');
    if (image != document) {
        $('bigImages').select('img').invoke('hide');
        $('bigImages').select('.'+image.className).invoke('show');
    }
});

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

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

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

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

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