Форум

b3ng3r · #1 (**permalink**) 05.09.2021, 22:31

Очередной вечер в попытке разобраться в работе 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 = "";
  }
});

рони · #2 (**permalink**) 05.09.2021, 23:00

b3ng3r,
а можно без любых id?

b3ng3r · #3 (**permalink**) 05.09.2021, 23:05

рони,
Ну мне необходимо по определенному диву скрывать остальные и показывать доп. определенный. Просто может привязку по классу сделать вместо ид

рони · #4 (**permalink**) 06.09.2021, 00:03

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>

b3ng3r · #5 (**permalink**) 06.09.2021, 09:41

рони,
А можешь дописать код, чтобы при нажатии на div info все остальные div info скрывались. То есть чтобы после нажатия оставался только div film и ничего больше. А то с моими стилями и внешнем оформлении данный формат конфликтует.

рони · #6 (**permalink**) 06.09.2021, 10:03

Сообщение от b3ng3r

все остальные div info скрывались.

<!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>

b3ng3r · #7 (**permalink**) 06.09.2021, 10:16

рони,
Помогло, благодарю.

b3ng3r · #8 (**permalink**) 06.09.2021, 10:42

рони,
В ходе изменений моего исходного кода и добавления его на хост, выявилась проблема. При использовании поиска и с последующей загрузкой точно таких же дивов с другими фильмами, скрипт с скрытием и показом div'ов перестал работать. Как можно решить данную проблему?
Прикреплю ссылку на сайт, но чтобы увидеть страницу уже с измененным скриптом надо чуть подождать чтобы хост обновился.
кликабельно

рони · #9 (**permalink**) 06.09.2021, 13:02

b3ng3r,
вынесите строки 43 - 55 из getMovies в любое место, отдельно.

Форум

Справочник

Discord чат

Курсы javascript