的Javascript環路（初級）

-5

我目前在學習JavaScript的開始階段，想知道你怎麼能遍歷這個數組和輸出的所有數據作爲HTML內容：的Javascript環路（初級）

var links = new Array(); //Missing this part as code 

links[0] = new Array(); 
links[0]["linkName"] = "W3Schools"; 
links[0]["linkLogo"] = "http://www.w3schools.com/images/w3schools.png"; 
links[0]["linkURL"] = "http://www.w3schools.com/"; 
links[0]["linkDescription"] = "W3Schools is a web developer information website, with tutorials and references relating to web development topics such as HTML, CSS, JavaScript and PHP."; 

links[1] = new Array(); 
links[1]["linkName"] = "Code Academy"; 
links[1]["linkLogo"] = ""; 
links[1]["linkURL"] = "https://www.codecademy.com/"; 
links[1]["linkDescription"] = "Codecademy is an online interactive platform that offers free coding classes in 9 different programming languages."; 

links[2] = new Array(); 
links[2]["linkName"] = ""; 
links[2]["linkLogo"] = "http://www.w3.org/2008/site/images/logo-w3c-mobile-lg"; 
links[2]["linkURL"] = "http://www.w3.org/"; 
links[2]["linkDescription"] = "The World Wide Web Consortium is the main international standards organization for the World Wide Web.";

來源

2016-12-09 JuliaM

「將所有數據輸出爲html內容」確實含糊不清。此外，在提出SO問題之前，嘗試使用Google搜索並顯示您嘗試過的內容。人們會很樂意幫助你。 – jmargolisvt

這是一個相當奇怪的數據結構，讓每個數組項都包含具有屬性的對象會不會更容易？（我不確定'links [0] [「linkName」] =「W3Schools」;'會做你認爲它會的） – DBS

人們低估你是迂腐笨蛋，因爲你沒有定義'html'和'output 」。代表他們接受我的道歉。大多數人都很棒，整個社區也是如此！給.forEach一個谷歌，在JS中循環，也許一般的JS教程！你可能已經潛入深度，所以採取緩慢，並繼續編碼:)一切順利！ –

使用您的結構，我們可以這樣做：

var links = new Array(); // Missing this part as code 
 

 
links[0] = new Array(); 
 
links[0]["linkName"] = "W3Schools"; 
 
links[0]["linkLogo"] = "http://www.w3schools.com/images/w3schools.png"; 
 
links[0]["linkURL"] = "http://www.w3schools.com/"; 
 
links[0]["linkDescription"] = "W3Schools is a web developer information website, with tutorials and references relating to web development topics such as HTML, CSS, JavaScript and PHP."; 
 

 
links[1] = new Array(); 
 
links[1]["linkName"] = "Code Academy"; 
 
links[1]["linkLogo"] = "http://2.bp.blogspot.com/-5_nn_mBDGb0/U3RBFBDiozI/AAAAAAAAm60/kOmwt-F5x8g/s1600/codeacademy.png"; 
 
links[1]["linkURL"] = "https://www.codecademy.com/"; 
 
links[1]["linkDescription"] = "Codecademy is an online interactive platform that offers free coding classes in 9 different programming languages."; 
 

 
links[2] = new Array(); 
 
links[2]["linkName"] = "The World Wide Web Consortium"; 
 
links[2]["linkLogo"] = "http://www.w3.org/2008/site/images/logo-w3c-mobile-lg"; 
 
links[2]["linkURL"] = "http://www.w3.org/"; 
 
links[2]["linkDescription"] = "The World Wide Web Consortium is the main international standards organization for the World Wide Web."; 
 

 
// Loop through the main array 
 
for(var i = 0; i < links.length; ++i){ 
 

 
    // As we loop, we'll create new HTML elements that will be configured 
 
    // with the information we extract from the objects in the array: 
 
    var div = document.createElement("div"); 
 
    var a = document.createElement("a"); 
 
    var img = document.createElement("img"); 
 
    
 
    // Use data in the nested array to configure the new HTML element 
 
    a.href = links[i]["linkURL"]; 
 
    img.src = links[i]["linkLogo"]; 
 
    img.alt = links[i]["linkDescription"]; 
 
    img.title = links[i]["linkName"]; 
 
    
 
    // Place the image inside of the link: 
 
    a.appendChild(img); 
 
    
 
    // Place the link inside of the div 
 
    div.appendChild(a); 
 
    
 
    // Inject div element into the web page 
 
    document.body.appendChild(div); 
 
}

img {width:200px}

然而，在JavaScript中，陣列是最好的用於存儲單個數據項或甚至嵌套的數組。 但是，當您需要存儲名稱和值以使用這些名稱時，最好使用一個爲鍵/值對存儲設計的對象。

這裏是您的數據，重組爲對象，然後將它們放入數組中，最後，數組循環，提取對象數據並將數據放入HTML元素中。

// First set up objects to store the name/value pairs (arrays don't do this) 
 
var object1 = { 
 
linkName : "W3Schools", 
 
linkLogo : "http://www.w3schools.com/images/w3schools.png", 
 
linkURL : "http://www.w3schools.com/", 
 
linkDescription : "W3Schools is a web developer information website, with tutorials and references relating to web development topics such as HTML, CSS, JavaScript and PHP." 
 
}; 
 

 
var object2 = { 
 
linkName : "Code Academy", 
 
linkLogo : "http://2.bp.blogspot.com/-5_nn_mBDGb0/U3RBFBDiozI/AAAAAAAAm60/kOmwt-F5x8g/s1600/codeacademy.png", 
 
linkURL : "https://www.codecademy.com/", 
 
linkDescription : "Codecademy is an online interactive platform that offers free coding classes in 9 different programming languages." 
 
}; 
 

 
var object3 = { 
 
linkName : "The World Wide Web Consortium", 
 
linkLogo : "http://www.w3.org/2008/site/images/logo-w3c-mobile-lg", 
 
linkURL : "http://www.w3.org/", 
 
linkDescription : "The World Wide Web Consortium is the main international standards organization for the World Wide Web." 
 
}; 
 

 
// Place the objects into an array: 
 
var objects = [object1, object2, object3]; 
 

 
// Loop through each of the objects in the array 
 
for(var i = 0; i < objects.length; ++i){ 
 

 
    // As we loop, we'll create new HTML elements that will be configured 
 
    // with the information we extract from the objects in the array: 
 
    var div = document.createElement("div"); 
 
    var a = document.createElement("a"); 
 
    var img = document.createElement("img"); 
 
    
 
    // Use data in the object to configure the new HTML element 
 
    a.href = objects[i].linkURL; 
 
    img.src = objects[i].linkLogo; 
 
    img.alt = objects[i].linkDescription; 
 
    img.title = objects[i].linkName; 
 
    
 
    // Place the image inside of the link: 
 
    a.appendChild(img); 
 
    
 
    // Place the link inside of the div 
 
    div.appendChild(a); 
 
    
 
    // Inject div element into the web page 
 
    document.body.appendChild(div); 
 
}

img {width: 200px;}

來源

2016-12-09 22:06:13

我覺得鬧鬼:) – Lain

@Lain這是爲什麼？ –

每天多次看到相同的名字是不尋常的，至少對我來說:) – Lain

-1

for (var i = 0, len = arr.length; i < len; i++) { 
    someFn(arr[i]); 
}

來源

2016-12-09 21:46:08

請使用[編輯]鏈接解釋此代碼的工作原理，不要只給代碼，因爲解釋更有可能幫助未來的讀者。 –

數據sturucture是一種不確定的，所以我想這些都意味着是主播：

links = []; //A man missed a declaration 

links[0] = new Array(); 
links[0]["linkName"] = "W3Schools"; 
links[0]["linkLogo"] = "http://www.w3schools.com/images/w3schools.png"; 
links[0]["linkURL"] = "http://www.w3schools.com/"; 
links[0]["linkDescription"] = "W3Schools is a web developer information website, with tutorials and references relating to web development topics such as HTML, CSS, JavaScript and PHP."; 

links[1] = new Array(); 
links[1]["linkName"] = "Code Academy"; 
links[1]["linkLogo"] = ""; 
links[1]["linkURL"] = "https://www.codecademy.com/"; 
links[1]["linkDescription"] = "Codecademy is an online interactive platform that offers free coding classes in 9 different programming languages."; 

links[2] = new Array(); 
links[2]["linkName"] = ""; 
links[2]["linkLogo"] = "http://www.w3.org/2008/site/images/logo-w3c-mobile-lg"; 
links[2]["linkURL"] = "http://www.w3.org/"; 
links[2]["linkDescription"] = "The World Wide Web Consortium is the main international standards organization for the World Wide Web."; 

//Looping though the array 
for(var i=0, j=links.length; i<j; i++){ 
    if (!!links[i]['linkName']){ //Displaying empty links makes less sense 
     //Creating a new anchor 
     var tA = document.body.appendChild(document.createElement('a')); 
     tA.href = links[i]['linkURL']; //Assigning the href 
     tA.innerHTML = links[i]['linkName']; //Assigning the name 
     tA.title = links[i]['linkDescription']; //Assigning the description 

    //Adding logo if available 
    if(!!links[i]['linkLogo']){ 
     var tI = tA.appendChild(document.createElement('img')); 
     tI.src = links[i]['linkLogo'] 
    } 
    } 
}

來源

2016-12-09 21:50:04 Lain

我需要輸出所有這些數據並將其格式化爲HTML，您的代碼不會這樣做，還有其他想法？ – JuliaM

@JuliaM：恐怕我不理解那個評論。 – Lain

下面的代碼的給定結構中映射成表示HTML併入所有給定元素的字符串的數組：

const linksAsHTML = links.map(link=> 
`<a href="${link["linkURL"]}" title="${links["linkDescription"]}"> 
    <img src="${link["linkLogo"]}" alt="${links["linkName"] }"/> 
</a>`);

有多種方式來變換這個字符串數組轉換成html頁面，雖然作爲初學者我建議學習如何使用jQuery

注意：這只是無數種方法之一，但希望這可以幫助您找出您想要做的事情。

來源

2016-12-09 22:50:07

我建議初學者與JQuery保持距離很遠，因爲它總是會發現它們濫用和過度使用它，而無需學習JavaScript的基礎知識。 –

@ScottMarcus，我相信我理解你的擔心 - 我可以寫一些關於使用「document.createElement」和跨瀏覽器特性等的東西，但是，啊，「沒有人會爲此付出時間」。 jQuery通過隱藏不必要的複雜性使得一些事情變得更容易，這可能是一把雙刃劍，但是你不應該認爲有人會濫用它。此外，對於一些人而言，在不知道JS其餘部分的情況下學習jQuery對於他們的目的來說是很好的，所以如果他們不需要，就沒有理由強迫他們學習所有的語言部分。 –

作爲一直在教JavaScript（以及其他一些編程語言）超過25年的人，我可以肯定地說，如果在沒有學習JavaScript的情況下使用JQuery，它總是會導致災難。特別是現在，DOM首先爲開發人員提供了許多吸引開發人員參與JQuery的API。我不能告訴你我看到代碼中包含的JQuery庫多少不過是簡單的事件綁定或查詢。 –

的Javascript環路（初級）

回答

相關問題