Скрытие/показ разных div
Очередной вечер в попытке разобраться в работе js.
Вчера разобрался с подставлением уникальных ид при динамическом добавлении через js. На этот раз необходимо сделать следующее: Имеем <div id="id-1"> ... </div> и таких 20 штук. То есть, <div id="id-2">...<div id="id-3"> и так далее. После этого имеем <div class="film_1">и точно так же до <div class="film_20">. Все что хочу сделать, это чтобы при нажатии на див с ид, тобишь <div id="4"> все остальные дивы с ид прятались по типу display none. И при этом <div class="film_4"> появлялся. Думаю задумка ясна. Но реализовать у меня не получается, как только не пробовал. Буду благодарен тому кто поможет. Вот код с динамическим созданием дивов с ид и классом. Cтрока с id - 52. Строка с class'ом - 81
const API_KEY =
"1576af80-f100-440b-94bb-d19fb8e90583";
const API_URL_POPULAR =
"https://kinopoiskapiunofficial.tech/api/v2.2/films/top?type=TOP_100_POPULAR_FILMS&page=1";
const API_URL_SEARCH =
"https://kinopoiskapiunofficial.tech/api/v2.1/films/search-by-keyword?keyword=";
const API_FILM = "8498e5fa32d80e669ddc10908de7e3bd";
getMovies(API_URL_POPULAR);
async function getMovies(url) {
const resp = await fetch(url, {
headers: {
"Content-Type": "application/json",
"X-API-KEY": API_KEY,
},
});
const respData = await resp.json();
showMovies(respData);
}
function getClassByRate(vote) {
if (vote >= 7) {
return "green";
} else if (vote > 5) {
return "orange";
} else {
return "red";
}
}
function showMovies(data) {
const moviesEl = document.querySelector(".movies");
// Очистка фильмов
document.querySelector(".movies").innerHTML = "";
data.films.forEach((movie, i) => {
const movieEl = document.createElement("div");
movieEl.classList.add("movie");
movieEl.innerHTML = `
<div id="id-${i+1}" href="">
<a href="">
<div class="movie__cover-inner">
<img
src="${movie.posterUrlPreview}"
class="movie__cover"
alt="${movie.nameRu}"
/>
<div class="movie__cover--darkened"></div>
</div>
<div class="movie__info">
<div class="movie__title">${movie.nameRu}</div>
<div class="movie__category">${movie.genres.map(
(genre) => ` ${genre.genre}`
)}</div>
${
movie.rating &&
`
<div class="movie__average movie__average--${getClassByRate(
movie.rating
)}">${movie.rating}</div>
`
}
</div>
</div>
<div class="film_${i+1}">
<div class="film__name">${movie.nameRu}</div>
<div class="film__poster"><img src="${movie.posterUrlPreview}" class="film__poster"></div>
<div class="film__movie"><iframe src="https://v1630850415.bazon.site/kp/${movie.filmId}" frameborder="0" scrolling="no" allowfullscreen="" referrerpolicy="origin" width="800" height="452" class="film__movie"></iframe></div>
<div class="film__description">${movie.description}</div>
</div>
`;
moviesEl.appendChild(movieEl);
});
}
const form = document.querySelector("form");
const search = document.querySelector(".header__search");
form.addEventListener("submit", (e) => {
e.preventDefault();
const apiSearchUrl = `${API_URL_SEARCH}${search.value}`;
if (search.value) {
getMovies(apiSearchUrl);
search.value = "";
}
});
|
b3ng3r,
а можно без любых id? |
рони,
Ну мне необходимо по определенному диву скрывать остальные и показывать доп. определенный. Просто может привязку по классу сделать вместо ид |
film poster open close
b3ng3r,
открывашка будет вечной, если я сменю батарейки...))) кликать по миниатюрам слева...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.movie__cover {
height: 70px;
width: 50px;
}
.info + .film{
display: none;
}
.info.open + .film{
display: block;
}
.film__poster{
margin: 0 auto;
width: 200px;
}
</style>
</head>
<body>
<div class="movies"></div>
<script>
const API_KEY =
"1576af80-f100-440b-94bb-d19fb8e90583";
const API_URL_POPULAR =
"https://kinopoiskapiunofficial.tech/api/v2.2/films/top?type=TOP_100_POPULAR_FILMS&page=1";
const API_URL_SEARCH =
"https://kinopoiskapiunofficial.tech/api/v2.1/films/search-by-keyword?keyword=";
const API_FILM = "8498e5fa32d80e669ddc10908de7e3bd";
getMovies(API_URL_POPULAR);
async function getMovies(url) {
const resp = await fetch(url, {
headers: {
"Content-Type": "application/json",
"X-API-KEY": API_KEY,
},
});
const respData = await resp.json();
showMovies(respData);
document.addEventListener("click", event => {
let {target} = event;
if (target = target.closest(".info")) {
event.preventDefault();
let open = document.querySelector(".info.open");
if (open && open != target) open.classList.remove("open");
target.classList.toggle("open")
}
})
}
function getClassByRate(vote) {
if (vote >= 7) {
return "green";
} else if (vote > 5) {
return "orange";
} else {
return "red";
}
}
function showMovies(data) {
const moviesEl = document.querySelector(".movies");
// Очистка фильмов
document.querySelector(".movies").innerHTML = "";
data.films.forEach((movie, i) => {
const movieEl = document.createElement("div");
movieEl.classList.add("movie");
movieEl.innerHTML = `
<div class="info">
<div class="movie__cover-inner">
<img
src="${movie.posterUrlPreview}"
class="movie__cover"
alt="${movie.nameRu}"
/>
<div class="movie__cover--darkened"></div>
</div>
<div class="movie__info">
<div class="movie__title">${movie.nameRu}</div>
<div class="movie__category">${movie.genres.map(
(genre) => ` ${genre.genre}`
)}</div>
${
movie.rating &&
`
<div class="movie__average movie__average--${getClassByRate(
movie.rating
)}">${movie.rating}</div>
`
}
</div>
</div>
<div class="film">
<div class="film__name">${movie.nameRu}</div>
<div class="film__poster"><img src="${movie.posterUrlPreview}" class="film__poster"></div>
<div class="film__movie"><iframe src="https://v1630850415.bazon.site/kp/${movie.filmId}" frameborder="0" scrolling="no" allowfullscreen="" referrerpolicy="origin" width="800" height="452" class="film__movie"></iframe></div>
<div class="film__description">${movie.description}</div>
</div>
`;
moviesEl.appendChild(movieEl);
});
}
/*const form = document.querySelector("form");
const search = document.querySelector(".header__search");
form.addEventListener("submit", (e) => {
e.preventDefault();
const apiSearchUrl = `${API_URL_SEARCH}${search.value}`;
if (search.value) {
getMovies(apiSearchUrl);
search.value = "";
}
});*/
</script>
</body>
</html>
|
рони,
А можешь дописать код, чтобы при нажатии на div info все остальные div info скрывались. То есть чтобы после нажатия оставался только div film и ничего больше. А то с моими стилями и внешнем оформлении данный формат конфликтует. |
Цитата:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.movie__cover {
height: 70px;
width: 50px;
}
.info + .film, .info.hidden{
display: none;
}
.info.open + .film{
display: block;
}
.film__poster{
margin: 0 auto;
width: 200px;
}
</style>
</head>
<body>
<div class="movies"></div>
<script>
const API_KEY =
"1576af80-f100-440b-94bb-d19fb8e90583";
const API_URL_POPULAR =
"https://kinopoiskapiunofficial.tech/api/v2.2/films/top?type=TOP_100_POPULAR_FILMS&page=1";
const API_URL_SEARCH =
"https://kinopoiskapiunofficial.tech/api/v2.1/films/search-by-keyword?keyword=";
const API_FILM = "8498e5fa32d80e669ddc10908de7e3bd";
getMovies(API_URL_POPULAR);
async function getMovies(url) {
const resp = await fetch(url, {
headers: {
"Content-Type": "application/json",
"X-API-KEY": API_KEY,
},
});
const respData = await resp.json();
showMovies(respData);
document.addEventListener("click", event => {
let {target} = event;
if (target = target.closest(".info")) {
event.preventDefault();
let open = document.querySelector(".info.open");
target.classList.toggle("open");
document.querySelectorAll(".info").forEach( elem => {
if(target != elem) {
elem.classList.toggle("hidden", target != open)
}
})
}
})
}
function getClassByRate(vote) {
if (vote >= 7) {
return "green";
} else if (vote > 5) {
return "orange";
} else {
return "red";
}
}
function showMovies(data) {
const moviesEl = document.querySelector(".movies");
// Очистка фильмов
document.querySelector(".movies").innerHTML = "";
data.films.forEach((movie, i) => {
const movieEl = document.createElement("div");
movieEl.classList.add("movie");
movieEl.innerHTML = `
<div class="info">
<div class="movie__cover-inner">
<img
src="${movie.posterUrlPreview}"
class="movie__cover"
alt="${movie.nameRu}"
/>
<div class="movie__cover--darkened"></div>
</div>
<div class="movie__info">
<div class="movie__title">${movie.nameRu}</div>
<div class="movie__category">${movie.genres.map(
(genre) => ` ${genre.genre}`
)}</div>
${
movie.rating &&
`
<div class="movie__average movie__average--${getClassByRate(
movie.rating
)}">${movie.rating}</div>
`
}
</div>
</div>
<div class="film">
<div class="film__name">${movie.nameRu}</div>
<div class="film__poster"><img src="${movie.posterUrlPreview}" class="film__poster"></div>
<div class="film__movie"><iframe src="https://v1630850415.bazon.site/kp/${movie.filmId}" frameborder="0" scrolling="no" allowfullscreen="" referrerpolicy="origin" width="800" height="452" class="film__movie"></iframe></div>
<div class="film__description">${movie.description}</div>
</div>
`;
moviesEl.appendChild(movieEl);
});
}
/*const form = document.querySelector("form");
const search = document.querySelector(".header__search");
form.addEventListener("submit", (e) => {
e.preventDefault();
const apiSearchUrl = `${API_URL_SEARCH}${search.value}`;
if (search.value) {
getMovies(apiSearchUrl);
search.value = "";
}
});*/
</script>
</body>
</html>
|
рони,
Помогло, благодарю. |
рони,
В ходе изменений моего исходного кода и добавления его на хост, выявилась проблема. При использовании поиска и с последующей загрузкой точно таких же дивов с другими фильмами, скрипт с скрытием и показом div'ов перестал работать. Как можно решить данную проблему? Прикреплю ссылку на сайт, но чтобы увидеть страницу уже с измененным скриптом надо чуть подождать чтобы хост обновился. кликабельно |
b3ng3r,
вынесите строки 43 - 55 из getMovies в любое место, отдельно. |
| Часовой пояс GMT +3, время: 16:52. |