我正在為學校制作一個電影過濾器網站。現在最后一部分是我需要將陣列中的 imdbID 鏈接到螢屏上的電影海報。我制作了鏈接,過濾器機制起作用了,但是當我點擊海報時,該過濾器的所有 ID 都被添加到最后。不止一個。
我的老師說我可以通過 movieArray 陣列 forEach 并在該回圈中寫入我需要的所有內容。有人可以幫助我或查看我的代碼我做錯了什么。我現在撰寫了 2 個單獨的函式來創建所需的引數。
我的代碼:
const addMoviesToDom = function (movieArray) {
const movieList = document.querySelector("#movielist");
movieList.innerHTML = "";
const moviePoster = movieArray.map(item => {
return item.Poster;
});
const imdbId = movieArray.map(item => {
return item.imdbID;
})
moviePoster.forEach(element => {
let newLi = document.createElement("li");
let newLink = document.createElement("a");
let images = document.createElement("img");
images.src = element;
newLink.setAttribute("href", "https://www.imdb.com/title/" imdbId);
newLink.setAttribute("target", "_blank");
newLi.append(newLink);
newLink.append(images);
movieList.appendChild(newLi);
})
};
addMoviesToDom(movies);
提前致謝,希望你們能理解我要解釋的內容,這對我來說都是全新的。
uj5u.com熱心網友回復:
imdbId是所有 ID 的陣列。當您將"https://www.imdb.com/title/"它連接到它時,它會變成一個字串,它將所有 ID 與一個,分隔符連接起來。因此,您不href只是將設定為與當前moviePoster元素對應的 ID 。
您需要對陣列進行索引以獲取正確的 ID。forEach提供陣列索引作為回呼函式的第二個引數,因此您可以更改element =>為(element, i) =>,然后使用imdbId[i]。
但更簡單的方法是跳過創建moviePoster和imdbId陣列,只從movieArray.
const addMoviesToDom = function(movieArray) {
const movieList = document.querySelector("#movielist");
movieList.innerHTML = "";
movieArray.forEach(element => {
let newLi = document.createElement("li");
let newLink = document.createElement("a");
let images = document.createElement("img");
images.src = element.Poster;
newLink.setAttribute("href", "https://www.imdb.com/title/" element.imdbId);
newLink.setAttribute("target", "_blank");
newLi.append(newLink);
newLink.append(images);
movieList.appendChild(newLi);
})
};
addMoviesToDom(movies);
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/358007.html
標籤:javascript 功能 争论
上一篇:函式中的遞回值
下一篇:如何使用條件將字串轉換為字典?
