javascript - 如何添加 if 和 else 语句，以便在加载当前电影时为我提供相关电影？

Question

这是我的代码。我有一个电影相关选项卡，当在浏览器中打开特定电影时，在相关选项卡下，相关电影应该在那里。我已经准备好地图功能，可以加载地图对象中的所有电影。想要一个 if 和 else 语句来选择相同类型的电影，方法是使用 getElementId 获取当前电影的 id 类型并将其与地图对象中的类型进行比较。希望我使用正确的术语

//create test div
const data = [{

  name: "13 reasons why",
  href: "13 reasons why.php",
  img: "https://images.theconversation.com/files/170594/original/file-20170523-5763-161mnda.jpg",
  describe: "Newcomer Katherine Langford plays the role of Hannah, a young woman who takes her own life. Two weeks after her tragic death, a classmate named Clay finds a mysterious box on his porch. Inside the box are recordings made by Hannah -- on whom Clay had a crush -- in which she explains the 13 reasons why she chose to commit suicide. If Clay decides to listen to the recordings, he will find out if and how he made the list. This intricate and heart-wrenching tale is told through Clay and Hannah's dual narratives.",
  rate: "7.6",
  date: "(2017 - 2020)"
}, {

  name: "30 Coins",
  href: "30 coins.php",
  img: "https://www.themoviedb.org/t/p/w500/b2i9aaV6ncULl9jYXEoPi7VFJg8.jpg",
  describe: "Father Vergara, an exorcist, boxer and ex-convict exiled to a remote town in Spain, enlists the help of the mayor and a veterinarian when a series of paranormal phenomena begins to occur.",
  rate: "7.2",
  date: "(2020 - Present)"
}, {

  name: "911 Lone Star",
  href: "911 lone star.php",
  img: "https://m.media-amazon.com/images/I/717AkBpHNjL._AC_SY450_.jpg",
  describe: "9-1-1: Lone Star follows a sophisticated New York firefighter who, along with his son, relocates from Manhattan to Austin, Texas. He must try to balance the duties of saving those who are at their most vulnerable and solving the problems in his own life. ",
  rate: "6.8",
  date: "(2017 - 2021)"
}, {

  name: "911",
  href: "911.php",
  img: "https://m.media-amazon.com/images/M/MV5BMzNiMmNmZWQtMTJlMS00NWIyLTlhNmEtNmI3M2Q1YjczMGI4XkEyXkFqcGdeQXVyNjEwNTM2Mzc@._V1_.jpg",
  describe: "Policemen, paramedics and firefighters put themselves in dangerous situations to save people's lives. Meanwhile, they also have to deal with their personal problems.",
  rate: "7.6",
  date: "(2018 - Present)"
}, {

  name: "A  confession",
  href: "a confession.php",
  img: "https://m.media-amazon.com/images/M/MV5BZTc0ZjQxOWEtNTc4MS00ZjgxLThkOWEtZGM1NzgzOWYwOTc1XkEyXkFqcGdeQXVyMTAyNjU1NjU5._V1_.jpg",
  describe: "The true story of DS Stephen Fulcher and his hunt for missing 22-year-old Sian O'Callaghan, and how it lead to the arrest of Christopher Halliwell. This was the beginning of the capture of a prolific serial killer and the detectives own downfall.",
  rate: "7.6",
  date: "(2019)"
}, {

  name: "A  million little things",
  href: "a million little things.php",
  img: "http://www.gstatic.com/tv/thumb/tvbanners/17114373/p17114373_b_v12_aa.jpg",
  describe: "The lives of a group of carefree friends from Boston change when one of them shockingly dies. They soon realise the importance of cherishing their friendship.",
  rate: "7.9",
  date: "(2018)"
}, {

  name: "A teacher",
  href: "a teacher.php",
  img: "https://m.media-amazon.com/images/M/MV5BZjgzMmUwZjgtNzNhMi00M2Y0LWIxOTAtYzYzODdjMTYzZWQyXkEyXkFqcGdeQXVyMTIwNDUyNzMy._V1_.jpg",
  describe: "This drama series examines the complexities and consequences of an illicit sexual affair between a young teacher and her student. Claire is a new teacher at Westerbrook High School in Texas. Dissatisfied in her marriage to her college sweetheart, Claire's life changes when Eric, a personable teenager in her English class, takes an interest in her. Popular and outgoing, Eric is the captain of the soccer team and nearly inseparable from his best friends. Everything seems perfect on the surface, but Eric is forced to juggle the pressures of school, applying for college and a part-time job, all while helping take care of his two younger brothers. Claire and Eric discover an undeniable connection that allows them to escape their lives, but their relationship accelerates faster than either could anticipate. The permanent damage left in the wake of their illicit affair becomes impossible for them, and their friends and family, to ignore.",
  rate: "6.9",
  date: "(2020)"
}, {

  name: "Absentia",
  href: "absentia.php",
  img: "https://m.media-amazon.com/images/M/MV5BNmFiNDI5ODUtODQ2ZC00ZjUwLWFhYjQtMjk3MmMzZjY1ZWU2XkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_.jpg",
  describe: ">Six years after going missing and being declared dead, FBI agent Emily Byrne is found alive in a cabin in the woods. With no memory of her past, she sets out to reclaim her life and identity.",
  rate: "7.3",
  date: "(2017 - 2020)"
}, {

  name: "After Life",
  href: "after life.php",
  img: "https://m.media-amazon.com/images/M/MV5BZjdjOWIxMDgtYTgwNS00MjE4LTliZWYtZGI1NDhhZmIyYjM1XkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_.jpg",
  describe: "Tony had a perfect life -- until his wife Lisa died. After that tragic event, the formerly nice guy changed. After contemplating taking his life, Tony decides he would rather live long enough to punish the world by saying and doing whatever he likes. He thinks of it as a superpower -- not caring about himself or anybody else -- but it ends up being trickier than he envisioned when his friends and family try to save the nice guy that they used to know. Golden Globe winner Ricky Gervais stars in the comedy series, which he also writes and directs.",
  rate: "8.4",
  date: "(2019 - 2020)"
}, {

  name: "Alex Rider",
  href: "alex rider.php",
  img: "https://m.media-amazon.com/images/M/MV5BOTg4ZmQ5ZjItZTllZC00NzUzLTkwMTEtMjIzYzliZjk2ODUwXkEyXkFqcGdeQXVyMTEyMjM2NDc2._V1_.jpg",
  describe: "London teenager Alex Rider is recruited by the Department of Special Operations, a subdivision of the Secret Intelligence Service (MI6), to infiltrate a controversial corrective academy for the wayward offspring of the ultra-rich.",
  rate: "7.6",
  date: "(2020)"
}, {

  name: "All Rise",
  href: "all rise.php",
  img: "https://m.media-amazon.com/images/M/MV5BYTk5ZjI0M2MtYjQ5Ny00OWJmLWExYWEtNjRlMTdkNjYwMGIzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_.jpg",
  describe: "A look inside the chaotic, hopeful and sometimes absurd lives of judges, prosecutors and public defenders as they work with bailiffs, clerks and cops to get justice for the people of Los Angeles amidst a flawed legal process. Among them is newly appointed Judge Lola Carmichael, a highly regarded and impressive deputy district attorney who doesn't intend to sit back on the bench in her new role, but instead leans in, immediately pushing the boundaries and challenging the expectations of what a judge can be.",
  rate: "6.7",
  date: "(2019 - 2021)"
}, {

  name: "Altered Carbon",
  href: "altered carbon.php",
  img: "https://m.media-amazon.com/images/M/MV5BNjIxMWMzMzctYmZkYy00OTkzLWFlMWUtMjc3ZDFmYzQ3YmVkXkEyXkFqcGdeQXVyNjU2ODM5MjU@._V1_.jpg",
  describe: "More than 300 years in the future, society has been transformed by new technology, leading to human bodies being interchangeable and death no longer being permanent. Takeshi Kovacs is the only surviving soldier of a group of elite interstellar warriors who were defeated in an uprising against the new world order. His mind was imprisoned for centuries until impossibly wealthy businessman Laurens Bancroft offers him the chance to live again. Kovacs will have to do something for Bancroft, though, if he wants to be resurrected. Bancroft's request of Kovacs is to solve a murder  Bancroft's. 'Altered Carbon' is based on Richard K. Morgan's cyberpunk noir novel of the same name.",
  rate: "8",
  date: "(2018 - 2020)"
}, {

  name: "American Horror Story",
  href: "american horror story.php",
  img: "https://flxt.tmsimg.com/assets/p9423798_b_v12_ad.jpg",
  describe: "An anthology series centering on different characters and locations, including a house with a murderous past, an insane asylum, a witch coven, a freak show circus, a haunted hotel, a possessed farmhouse, a cult, the apocalypse, a slasher summer camp, and a bleak beach town and desert valley.",
  rate: "7.6",
  date: "(2011 - Present)"
}, {

  name: "Anne With An E",
  href: "anne with an e.php",
  img: "https://m.media-amazon.com/images/M/MV5BNThmMzJlNzgtYmY5ZC00MDllLThmZTMtNTRiMjQwNmY0NmRhXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_FMjpg_UX1000_.jpg",
  describe: "This reimagining of the classic book and film is a coming-of-age story about a young orphan who is seeking love, acceptance and her place in the world. Amybeth McNulty stars as Anne, a 13-year-old who has endured an abusive childhood in orphanages and the homes of strangers. In the late 1890s, Anne is mistakenly sent to live with aging siblings, Marilla and Matthew Cuthbert, who live on Prince Edward Island. Anne, who proves to be uniquely spirited, imaginative and smart, transforms the lives of Marilla, Matthew and everyone else in their small town.",
  rate: "8.7",
  date: "(2017 - 2019)"
}, {

  name: "animal kingdom",
  href: "animal kingdom.php",
  genre: "drama",
  img: "https://m.media-amazon.com/images/M/MV5BOTk1NjAwOTM1OV5BMl5BanBnXkFtZTgwMzUwODQ3NzM@._V1_FMjpg_UX1000_.jpg",
  describe: "After the death of his mother, Joshua decides to live with his grandmother, who heads a criminal clan. His life takes a turn as he gets involved with his cousins and their criminal activities.",
  rate: "8.2",
  date: "(2016 - Present)"
}, {

  name: "Arrow",
  href: "arrow.php",
  genre: "drama",
  img: "https://m.media-amazon.com/images/M/MV5BMTI0NTMwMDgtYTMzZC00YmJhLTg4NzMtMTc1NjI4MWY4NmQ4XkEyXkFqcGdeQXVyNTY3MTYzOTA@._V1_.jpg",
  describe: "After mastering the skill of archery on a deserted island, multi-millionaire playboy Oliver Queen returns to his city to take on the vigilante persona of Arrow to fight crime and corruption.",
  rate: "7.5",
  date: "(2012 - 2020)"
}, {

  name: "Atypical",
  href: "atypical.php",
  img: "https://m.media-amazon.com/images/M/MV5BMjNjNThmYTUtMjY2Ni00OGE4LTgzOTItYTgzMDllNDM5NTI5XkEyXkFqcGdeQXVyNjEwNTM2Mzc@._V1_FMjpg_UX1000_.jpg",
  describe: "This heartfelt comedy follows Sam, a teenager on the autism spectrum, who has decided he is ready for romance. In order to start dating -- and hopefully find love -- Sam will need to be more independent, which also sends his mother (Jennifer Jason Leigh) on her own life-changing path. She and the rest of Sam's family, including a scrappy sister and a father seeking a better understanding of his son, must adjust to change and explore what it means to be normal. The series is created and written by Robia Rashid and Academy Award-winning producer Seth Gordon.",
  rate: "8.3",
  date: "(2017 - 2021)"
}]

const createTest = (selector) => {
  const test = document.querySelector(selector)

  console.log(selector)
  let html = ''
  data.map(({
    id,
    name,
    href,
    img,
    describe,
    rate,
    date
  }, index) => {
    html = `
                ${html}
                
                <div  class="movie-item-style-2">
                    <div id="product${index}" class="mv-item-infor">
                        <a href="${href}"><img src="${img}" alt=""></a>
                        <h6 style="padding-top: 1em;"><a href="${href}">${name} <span>${date}</span></a></h6>
                        <p class="rate"><i class="ion-android-star"></i><span>${rate}</span> /10</p>
                        <p class="describe">${describe}</p>
                    </div>
                </div>
                `
  })

  test.innerHTML = html

}
createTest(".content")

<div id="moviesrelated" class="tab">
  <div class="row">
    <h3>Related Movies</h3>
    <div class="test"></div>
    <div class="topbar-filter">
      <p>Found <span>12 movies</span> in total</p>
      <label>Sort by:</label>
      <select>
        <option value="popularity">Popularity Descending</option>
        <option value="popularity">Popularity Ascending</option>
        <option value="rating">Rating Descending</option>
        <option value="rating">Rating Ascending</option>
        <option value="date">Release date Descending</option>
        <option value="date">Release date Ascending</option>
      </select>
    </div>

    <div class="content">
    </div>

    <div class="topbar-filter">
      <label>Movies per page:</label>
      <select>
        <option value="range">5 Movies</option>
        <option value="saab">10 Movies</option>
      </select>
      <div class="pagination2">
        <span>Page 1 of 2:</span>
        <a class="active" href="#">1</a>
        <a href="#">2</a>
        <a href="#"><i class="ion-arrow-right-b"></i></a>
      </div>
    </div>
  </div>
</div>

标签： javascripthtml