코드 사항 Array.push

-1

HTML 사용하여 실행되지 : 나는 어디 확실하지 않다코드 사항 Array.push

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

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

자바 스크립트를 문제 버튼을 클릭 한 후에 아무 일도 일어나지 않았습니다.
도와주세요. 어떤 도움을 주시면 감사하겠습니다. 고맙습니다.

출처

2014-04-05 Jamie

당신이 등호 누락 :.. var에 [] = imageLinkArray',' – ChaosPandion

은 무엇 @null 말했다 또한 코드를 linting하는 습관을 – shriek

<script>pushImages();</script>

DOM이로드되기 전에 함수를 호출하기 때문에 콘솔에 오류가 발생합니다. 코드 하단에 배치하거나 window.onload = function() { .... }에 넣으십시오.

또한이 라인에서 등호를 놓치고 :... var imageLinkArray[]; (그렇게하는 것이 나쁜 습관이다

나는 또한 인라인 스크립트를 실행하지 제안

var imageLinkArray = [];해야한다 (몸에 이벤트 핸들러를 추가하십시오 onclick 전용) 하나의 이벤트 핸들러를 지원

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

출처

2014-04-05 04:46:17

내가 대답은 제안 편집하기 전에 충분히 확인하십시오. 새 편집을 포함하지 않고 이것을 확인하십시오. http : // cod epen.io/jamiechoi/full/zHpfo – Jamie

@ jfriend00이 경우 DOM 요소를 참조하므로 페이지가 완전히로드되기 전에 실행됩니다. –

그리고 7 분 후에 답을 수락하는 데 15 분 제한 때문에 답을 수락합니다. – Jamie

코드 사항 Array.push

답변

관련 문제