2016-12-26 144 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

你的問題是:如果你想使用我++

請for循環初始化你的? –

+0

在這個程序中,你可以看到有循環在其中我 - 所以我的問題是,當我編碼我 - 導航顯示2次社交媒體圖標,但是當我編碼我+ +它顯示1次在瀏覽器中,即使我在HTML編輯器中放置了2次導航標籤,您可以在上面看到html和javascript代碼。 –

+0

它通過社交媒體圖標循環並創建html(第一個for循環)比它將html添加到每個社交媒體元素(第二個for循環) –

回答

0

這裏的問題是,<nav class="social-media"></nav>是在這裏使用了兩次。所以,當你達到這一點的代碼for(var i = myList.length - 1; i >= 0; i--)它開始尋找代碼myList中如果您在for循環的初始化,你會發現follwing有仔細看,您已經定義爲myList = document.querySelectorAll(".social-media");

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 = 0; i <myList.length; i++)