代码未使用 array.push 运行

Question

HTML :

<html>
  <head>
    <script>pushImages();</script>
    <title>Float Image Gallery</title>
  </head>
  <body>
    <button onclick="showAllGalleries();">Show gallery</button>
    <div class="gallery">
      <div class="gallery-close">
        <a href=#><img class="gallery-close-button" src="http://bit.do/closeicon" onclick="hideAllGalleries();" /></a>
      </div>

      <div class="gallery-content">
        <!-- Whenever need to add a image, add this code :
          <div class="gallery-image-cell">
            <img class="gallery-content-image" src="" alt="Please add image here" />
            <img class="gallery-content-image" src="" alt="Please add image here" />
            <img class="gallery-content-image" src="" alt="Please add image here" />
            <img class="gallery-content-image" src="" alt="Please add image here" />
          </div>
        -->
        <!--
        Information :
          When adding photo that is not 1:1, it will force shrink to 1:1.
        -->
        <div class="gallery-image-cell">
          <img class="gallery-content-image" src="" alt="Please add image here" />
          <img class="gallery-content-image" src="" alt="Please add image here" />
          <img class="gallery-content-image" src="" alt="Please add image here" />
          <img class="gallery-content-image" src="" alt="Please add image here" />
        </div>
        <div class="gallery-image-cell">
          <img class="gallery-content-image" src="" alt="Please add image here" />
          <img class="gallery-content-image" src="" alt="Please add image here" />
          <img class="gallery-content-image" src="" alt="Please add image here" />
          <img class="gallery-content-image" src="" alt="Please add image here" />
        </div>
      </div>

    </div>
   </body>
</html>

CSS :

<style>
.gallery {
  display:none;
  width:100%;
  height:100%;
  left:0;
  bottom:0;
  top:auto;
  right:auto;
  position:fixed;
  background-color:#cccccc;
  opacity:50%;
  overflow-y: scroll;
}

.gallery-close {
  width:auto;
  height:auto;
  margin-top:10px;
  margin-left:10px;
}

.gallery-close-button {
  width:30px;
  height:30px;
}

.gallery-content {
  width:100%;
  height:auto;
  text-align:center; 
}

.gallery-content-image {
  width:20%;
  height:100%;
  opacity:0.6;
  filter:alpha(opacity=60);
}

.gallery-content-image:hover {
  background-color:#ffffff;
  opacity:1.0;
  filter:alpha(opacity=100);
}

.gallery-image-cell {
  width: 100%;
  height: 0;
  padding-bottom: 20%;
  margin-left: auto;
  margin-right: auto;
}
</style>

Javascript :

<script tyep="text/javascript">
function showAllGalleries(){
  var adsArray = document.getElementsByClassName("gallery");
  for (var i = 0; i<adsArray.length; i++){
    adsArray[i].style.display='inline';
  }
}

function hideAllGalleries(){
  var adsArray = document.getElementsByClassName("gallery");
  for (var i = 0; i<adsArray.length; i++){
    adsArray[i].style.display='none';
  }
}

function pushImages(){
  var imageArray = document.getElementsByClassName("gallery-content-image")
  var imageLinkArray[];
  imageLinkArray.push("http://www.catchannel.com/images/feral-cats-birds.jpg");
  imageLinkArray.push("http://www.catchannel.com/images/orange-tabbies.jpg");
  imageLinkArray.push("http://thenypost.files.wordpress.com/2013/08/tiger132056-300x300.jpg");
  imageLinkArray.push("http://bioexpedition.com/wp-content/uploads/2012/06/Indochinese-Tiger-picture.jpg");
  imageLinkArray.push("http://www.east-northamptonshire.gov.uk/images/Dog_2.jpg");
  imageLinkArray.push("http://www.pet365.co.uk/product_images/r/008/dd_black_with_dog__41452_zoom.jpg");
  imageLinkArray.push("http://www.texasbirds.info/backyard/images/mountain_bluebird2_male.jpg");
  imageLinkArray.push("http://www.honolulumagazine.com/images/2013/Oct13/Print/Bird_Fairy.jpg");
  /*Use imageLinkArray.push("") to add a image; Add enough image.*/
  for (var i=0; i<imageArray.length; i++){
    imageArray[i].src = imageLinkArray[i];
  }
}
</script>

我不确定问题出在哪里，但单击按钮后什么也没发生。
请帮忙。 任何帮助将不胜感激。 谢谢你。

Answer 1

<script>pushImages();</script>

这是在加载 DOM 之前调用一个函数，这应该会在您的控制台中引发错误。 将它放在代码的底部或将其包装在window.onload = function() { .... } 。

您还缺少这一行中的等号： var imageLinkArray[]; （应该是var imageLinkArray = []; 。

我还建议不要练习内联脚本。 这样做是不好的做法。 尝试向正文添加一个事件处理程序（ onclick仅支持一个事件处理程序）。

document.getElementsByTagName("body")[0].addEventListener("load", showAllGalleries, false);

代码未使用 array.push 运行

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-04-05 04:46:17

代码未使用 array.push 运行

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-04-05 04:46:17

解决方案1
1 已采纳 2014-04-05 04:46:17