我想第一件事document.write
現在很少使用,因爲有一個更好和更有效的方式添加東西(元素,文本等)到DOM(稍後更多)。此外,在你的情況下,你不知道的是document.write
是不是像echo
或println
;每次使用它都會清除文檔,這可能是您看不到任何內容的原因。換句話說,多個document.write
的結果是不累積。
第二件事情是,有更好的方式來標記元素,而不是使用id
s,特別是如果頁面上有很多這樣的元素,就像你擁有的那樣。再次,現在有更好的方法來定位元素,或者比十年或十五年前更容易捕捉事件。
所以,讓我們來談談你的代碼。
您可以使用方括號[]
快速創建一個數組。
var arr = [
'notiziepericolose.blogspot.it',
'ilcorrieredellanotte.it',
'ilmattoquotidiano.it',
'ilfattonequotidiano.com',
'rebubblica.altervista.org',
'coriere.net'
];
您不必創建陣列,以便副本sort
- 它可以就地完成:
arr.sort();
我要保持你的循環,但告訴你將字符串連接在一起的另一種方式。有些人更喜歡將字符串添加到一起,但我更喜歡這種方式,那就是創建一個字符串的小部分數組,然後將它們放在一起**。
// Set l as the length, and create an output array called list
for (var i = 0, l = arr.length, list = []; i < l; i++) {
// I've changed things here. I've added a class called item
// but also changed the element id to a data-id instead
var li = ['<li class="item" data-id="', i, '">', arr[i], '</li>'];
// Push the joined li array of strings into list
list.push(li.join(''));
}
假設你有所謂的 「主」 您的頁面上的元素:
HTML
<div id="main"></div>
JS
您可以添加列表陣列作爲HTML字符串到main
使用方法:
var main = document.getElementById('main');
// Note that I've given the ordered list an id called list
var HTML = ['<ol id="list"><b>', list.join(''), '</b></ol>'].join('');
main.insertAdjacentHTML('beforeend', html);
好的,這很容易。但我敢打賭,你問的是如何針對列表中的單個項目,以便如果我點擊其中的一個,它會警告它是什麼(或什麼)。
而不是添加事件偵聽器以每個列表項(其中我們可以,但它可以工作performatively昂貴你有更多的項目),我們要重視一個到我們補充說list
ID的ol
元素從項目和捕獲的事件,因爲他們冒泡:
var ol = document.getElementById('list');
然後一個事件偵聽器添加到它告訴我們什麼功能(checkItem
)的列表時,點擊事件引發被稱爲:
ol.addEventListener('click', checkItem);
我們的函數使用事件(e
)來查明事件的目標是什麼(點擊了哪個項目),並提醒其文本內容。
function checkItem(e) {
alert(e.target.textContent);
}
你可以看到這一切工作in this demo。希望這有些幫助。
**下面是整理的另一種方式,並通過使用reduce
數組循環:
var list = arr.sort().reduce(function (p, c, i) {
return p.concat(['<li class="item" data-id="', i, '">', c, '</li>']);
}, []).join('');
DEMO
什麼是你的錯誤? – sheplu
首先,你的循環中的變量i是未定義的。 – Adriani6
ids應該是唯一的btw – Roecrew