純粋なJavaScriptでpic-viewerを作成する際の問題

私は学校のコースでJavaScriptの基礎を学んでいます。これは、私が別のライブラリに潜っているときにJavaScriptを十分に理解したいからです。純粋なJavaScriptでpic-viewerを作成する際の問題

<div>の画像が隠された機能を作成することができました（私は「純粋な」JavaScriptを使ってfadeIn関数を使用しています）。

問題は、私が関数を動的にして、ただ1つ以上の要素で機能させたいということです。私は今この問題をどのように進めるべきかはわかりません。

ご意見やご感想をお寄せください。

<div id="hiddenElement"> 
     <img src="#" alt="image" class="maxImg"/> 
    </div> 

    var hiddenElement = document.getElementById('hiddenElement'); 
    anchor.addEventListener('click', spawnImage, false); 


    function spawnImage() { 
      $(hiddenElement).fadeIn('slow', function() { 
       hiddenElement.style.display = 'block'; 
      });

次のようになります。あなたがロードすると

function spawnImage(divId, backId) { 
      $(divId).fadeIn('slow', function() { 
       document.getElementById('divId').style.display = 'block'; 
      }); 
      $(backId).fadeIn('slow', function() { 
       document.getElementById('backId').style.display = 'block'; 
      });

：？ http://oscarlandstrom.se/javascript/pic.html

出典

2011-09-20 Oscar

あなたは、あなたが関数parametrsとしてdiv要素や背中のIDを渡すことができますが、この機能を統一したい意味しますか次のようなページ呼び出し：

spawnImage(fistDivId, backId); 
spawnImage(secondDivId, backId);

出典

2011-09-20 10:22:42 Kate

イムのEventListenerで画像を産卵します。そして私はそれが単なる1つ以上の要素のために働くことを望んでいます。 addEventListener（ 'click'、spawnImage、false）; – Oscar

あなたの関数を保持するすべての要素に対してass = "spawn" （class = "spawn" - 要素をマークするために使われる空のクラスです）。そして、あなたは次のようにロード・イベントに設定する必要があります

$(document).ready(function() { 
    var spawnedElamants = getElementsByClassName("spawn"); 
    for(var i=0; i<spawnedElamants.length; i++) 
    { 
    spawnImage(spawnedElamants[i].id, backId); 
    } 
});

出典

2011-09-20 10:44:53 Kate

私はこの作業をしようとします。さもなければ、私はさらなる質問で戻ってくるでしょう。ヘルプと高速応答をありがとう:) – Oscar

確認すること：

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <link rel="stylesheet" type="text/css" href="sheet.css" /> 
     <script src="js.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

    </head> 
    <body> 
     <div id="bkgFade"></div> 
     <div id="container"> 
      <div class="imgWrap"> 
       <img src="http://www.morrharet.se/images/morrharet.jpg" alt="image" id="anchor" class="minImg"/> 
      </div> 
      <div class="imgWrap"> 
       <img src="http://www.morrharet.se/images/morrharet.jpg" alt="image" id="anchor2" class="minImg"/> 
      </div> 
     </div> 
     <div id="hiddenElement"> 
      <img src="http://www.morrharet.se/images/morrharet.jpg" alt="image" class="maxImg"/> 
     </div> 
    </body> 
</html> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     var minImgs = document.getElementsByClassName("minImg"); 
     var maxImgs = document.getElementsByClassName("maxImg"); 
     var bkgFade = document.getElementById('bkgFade'); 
     for(var i=0; i<minImgs.length; i++) 
     { 
      minImgs[i].addEventListener('click', spawnImage, false);  
     } 
     for(var i=0; i<maxImgs.length; i++) 
     { 
      maxImgs.addEventListener('click', despawnImage, false); 
     } 
     } 
    ) 

    function spawnImage() { 
     $(hiddenElement).fadeIn('slow', function() { 
      hiddenElement.style.display = 'block'; 
     }); 

     $(bkgFade).fadeIn('slow', function() { 
      bkgFade.style.display = 'block'; 

     }); 
    } 

    function despawnImage() { 
     $(hiddenElement).fadeOut('slow', function() { 
      document.getElementById('hiddenElement').style.display = 'none'; 
     }); 
     $(bkgFade).fadeOut('slow', function() { 
      document.getElementById('bkgFade').style.display = 'none'; 

     }); 
    } 
</script>

出典

2011-09-20 11:53:47 Kate

私は別のイメージを持っている場合、私はどのようにベストプラクティスによってそれらをhiddenElementに入れますか？ – Oscar

はどこかでmaxImgsをhiddenElementに入れることができますか？ – Oscar

"hiddenElement" - divは隠されているので、画像をどのように置いても関係ありません。「

」。クラス "maxImg"を持つすべての画像について、クリックリスナ - despawnImageが設定されます。 – Kate

純粋なJavaScriptでpic-viewerを作成する際の問題

答えて

関連する問題