2016-12-26 13 views
-1

私は現在JavaScript関数を使っていますが、これらのプログラムは私にはちょっと混乱させてくれます。下記のプログラムについて説明してください。Javascript関数理解

var socialMediaIcon = { 
 
    facebook: "http://facebook.com/haseebjumani", 
 
    Twitter: "http://twitter.com/haseebjumani", 
 
    whatsapp: "http://whatsapp.com/", 
 
    flickr: "http://flicker.com/haseebjumani" 
 
} 
 

 
var social = function() { 
 
    var output = '<ul>', 
 
    myList = document.querySelectorAll(".social-media"); 
 

 
    for (var key in arguments[0]) { 
 
     output += '<li><a href="'+ socialMediaIcon[key] + '">' + 
 
     '<img src="images/' + key + '.png" alt="icon for' + key + '">' + '</a></li>';   
 
    } 
 

 
    output += '</ul>'; 
 
    
 
     for(var i = myList.length - 1; i >= 0; i--){ 
 
     myList[i].innerHTML = output; 
 
    }; 
 
    
 

 
}(socialMediaIcon);
<!DOCTYPE html> 
 
<head> 
 
    <title>Social Media Icons</title> 
 
</head> 
 
<body> 
 
    
 
    <nav class="social-media">g</nav> 
 
    <h1>Welcome</h1> 
 
    
 
    <p> lorem ipsum delor sit amit lorem ipsum delor sit amit lorem ipsum delor sit amit 
 
     lorem ipsum delor sit amit lorem ipsum delor sit amit lorem ipsum delor sit amitlorem ipsum delor sit amit 
 
     lorem ipsum delor sit amit lorem ipsum delor sit amit lorem ipsum delor sit amit lorem ipsum delor sit amit 
 
    </p> 
 
    <nav class="social-media"></nav> 
 
    <script src="social.js"></script> 
 
</body> 
 
</html>

+1

あなたの質問は何を? –

+0

このプログラムでは、あなたが見ることができるループがあります - 私の質問は、私がコードするとき - navでソーシャルメディアのアイコンが2回表示されますが、私は+ +そのコードをブラウザで1回、でも、htmlエディタにnavタグを2回置いても、上記のHTMLとjavascriptコードを見ることができます。 –

+0

それはsocialMediaIconsをループし、すべてのsocialmedia elem(2番目のループ)にhtmlを追加するよりhtml(最初のforループ)を作成します。 –

答えて

0

ここでの問題は、<nav class="social-media"></nav>はこっち2回使用されていることです。

for(var i = myList.length - 1; i >= 0; i--) 

First Iteration: 

var i = myList.length - 1 /* 1 in this case */ 

now i >= 0 sets as True 

then you will see social icons on later .social-media as index in for loop is set as 1 

Second Iteration: 

var i = i-- /* here value of i is set to 0 */ 

now i >= 0 also sets to True 

then you will seel social icons on first .social-media as index in for loop is set as 0 

その他の方法:あなたがコードfor(var i = myList.length - 1; i >= 0; i--)のこの時点で到達したときにそれはあなたがループ初期化のために、あなたの中に近い外観を持っている場合は、follwing見つけるmyList = document.querySelectorAll(".social-media");として定義しているコードではmyListを探し始めあなたが使用したい場合、私は

++をお使いのforループのように初期化してください:

for(var i = 0; i <myList.length; i++)