有没有办法将链接添加到标题或图像。单击电影或图像的标题时，我想转到下一页“moviesOnline.html”。
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap" rel="stylesheet">
<title>Movie App vanilla Javascript.</title>
<link rel="stylesheet" href="practice.css">
</head>
<body>
<header>
<img src="tv.svg" alt="" class="logo">
<a href="practice.html"><h1>Movies</h1></a>
<a href="practice.html"><h2>Home</h2></a>
<form id="form">
<input type="text" id="search" placeholder="Search" class="search" />
</form>
</header>
<main id="main"></main>
<script src="practice.js"></script>
</body>
</html>
const apiUrl = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=04c35731a5ee918f014970082a0088b1&page=1';
const IMGPATH = "https://image.tmdb.org/t/p/w1280";
const SEARCHAPI = "https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query=";
const main = document.getElementById("main");
const form = document.getElementById("form");
const search = document.getElementById("search");
showMovies(apiUrl);
function showMovies(url){
fetch(url).then(res => res.json())
.then(function(data){
console.log(data.results);
data.results.forEach(element => {
const el = document.createElement('div');
const image = document.createElement('img');
const text = document.createElement('h2');
text.innerHTML = element.title;
image.src = IMGPATH + element.poster_path;
el.appendChild(image);
el.appendChild(text);
main.appendChild(el);
});
});
}
form.addEventListener("submit", (e) => {
e.preventDefault();
main.innerHTML = '';
const searchTerm = search.value;
if (searchTerm) {
showMovies(SEARCHAPI + searchTerm);
search.value = "";
}
});
有没有办法将链接添加到标题或图像。单击电影或图像的标题时，我想转到下一页“moviesOnline.html”。
最佳答案
这是我使用 JS 的解决方案，只需更改函数中的 URL。我已经为它添加了评论。
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap" rel="stylesheet">
<title>Movie App vanilla Javascript.</title>
<link rel="stylesheet" href="practice.css">
</head>
<body>
<header>
<img src="tv.svg" alt="" class="logo">
<a href="practice.html"><h1>Movies</h1></a>
<a href="practice.html"><h2>Home</h2></a>
<form id="form">
<input type="text" id="search" placeholder="Search" class="search" />
</form>
</header>
<main id="main"></main>
<script src="practice.js"></script>
</body>
<script>
const apiUrl = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=04c35731a5ee918f014970082a0088b1&page=1';
const IMGPATH = "https://image.tmdb.org/t/p/w1280";
const SEARCHAPI = "https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query=";
const main = document.getElementById("main");
const form = document.getElementById("form");
const search = document.getElementById("search");
showMovies(apiUrl);
function showMovies(url){
fetch(url).then(res => res.json())
.then(function(data){
console.log(data.results);
data.results.forEach(element => {
const el = document.createElement('div');
const image = document.createElement('img');
const text = document.createElement('h2');
text.innerHTML = element.title;
image.src = IMGPATH + element.poster_path;
el.appendChild(image);
el.appendChild(text);
let callBack = (function(element){
return function(event){
event.preventDefault();
console.log(element);
let nextURL = "moviesOnline.html"; //Change this URL dynamically, I'm assuming you are getting the next URL in the element
window.open(nextURL);
}
})(element);
image.addEventListener("click",callBack);
text.addEventListener("click",callBack);
main.appendChild(el);
});
});
}
form.addEventListener("submit", (e) => {
e.preventDefault();
main.innerHTML = '';
const searchTerm = search.value;
if (searchTerm) {
showMovies(SEARCHAPI + searchTerm);
search.value = "";
}
});
</script>
</html>
关于javascript - 如何将链接添加到 "Title"或 "image"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67395109/