![](/img/trans.png)
[英]How to load another html inside index.html on click Javascript
[英]How can I display the object property in text format inside the another index.html webpage in Javascript instead of an URL?
下面是我編寫的一個獲取電影圖像的函數,並將這些圖像與 Trending_movie.overview 屬性進行超鏈接。
當我單擊圖像時,出現以下錯誤,該函數正在將 Trending_movie.overview 屬性轉換為某種 URL錯誤是:-
無法 GET /A%20group%20of%20vigilantes%20known%20informally%20as%20%E2%80%9CThe%20Boys%E2%80%9D%20set%20out%20to%20take%20down%20corrupt%20superheroes%20no%20 %20more%20than%20blue-collar%20grit%20and%20a%20willingness%20to%20fight%20dirty。
function getTrendingMovies(Trending_movies){
const trending = document.createElement('div')
trending.setAttribute('class','All_trending_movies')
Trending_movies.map((Trending_movie)=>{
const img =document.createElement('img');
const a= document.createElement('a');
a.setAttribute('href',Trending_movie.overview);
img.src=image_url + Trending_movie.backdrop_path;
a.appendChild(img);
trending.appendChild(a);
});
return trending;
}
對象如下:-
Trending_movies:
backdrop_path: "/mGVrXeIjyecj6TKmwPVpHlscEmw.jpg"
first_air_date: "2019-07-25"
genre_ids: (2) [10759, 10765]
id: 76479
media_type: "tv"
name: "The Boys"
origin_country: ["US"]
original_language: "en"
original_name: "The Boys"
overview: "A group of vigilantes known informally as “The Boys” set out to take down corrupt superheroes with no more than blue-collar grit and a willingness to fight dirty."
popularity: 1707.804
poster_path: "/mY7SeH4HFFxW1hiI6cWuwCRKptN.jpg"
vote_average: 8.4
vote_count: 2162
我想以文本格式而不是 URL 顯示新網頁上的概覽屬性。
任何形式的幫助將不勝感激...
將overview
屬性設置為錨元素的href
值。 然后將href
設置為您的index2.html
並在index2.html
添加?id=
。 =
后面的值應該是Trending_movie
的id
。
function getTrendingMovies(Trending_movies){
const trending = document.createElement('div')
trending.classList.add('All_trending_movies')
Trending_movies.map((Trending_movie)=>{
const img = document.createElement('img');
const a = document.createElement('a');
img.src = image_url + Trending_movie.backdrop_path;
a.appendChild(img);
a.textContent = Trending_movie.overview;
a.href = `index2.html?id=${Trending_movie.id}`
trending.appendChild(a);
});
return trending;
}
然后在您的 index2.html 上,您從 URL 中獲取要顯示的電影的 id。 在那里創建一個新的腳本文件,您將在其中讀取id
並循環播放您的熱門電影。
趨勢電影數組上的find
方法將幫助您從與 id 匹配的數組中檢索單個對象。
const params = new URLSearchParams(location.search); // Parses the URL
const id = params.get('id'); // Gets the ID from the URL.
/**
* Function that loops through the trending movies
* and returns the trending movie object that has
* the same ID as is passed through the second param.
* Or returns undefined when it is not found.
*/
function getTrendingMovieById(trendingMovies, id) {
return trendingMovies.find(movie => {
return movie.id === id
});
}
// Now you get the trending movie you are looking for by id.
const trendingMovie = getTrendingMovieById(Trending_movies, id);
// Then check if it is found, if not stop the script.
if (trendingMovie === undefined) {
return;
}
// Now you can do stuff with your single trending movie.
console.log(trendingMovie);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.