javascript - 如何制作更新内容区？

Question

我想做什么

我正在制作一个电影演示网站，并且有四个电影海报面板，其中显示了应该可点击的海报、标题和放映时间。

当有人单击任何一个面板时，我的意图是面板下方填充文本和预告片视频的区域会根据单击的面板更新/替换其内容。其他三个区域应该是隐藏的。

我已经制作了面板和容器区域，但我还没有弄清楚如何替换内容。

我尝试过的内容/代码

我发现了类似的问题，例如 this one ，但我发现没有一个能够完全回答我的问题。

感谢您的帮助!

这是我的面板代码:

/* Panels */
.panel {
  border: 1px solid #333;
  border-radius: 15px;
  width: 70%;
  margin: 0 auto;
  margin-bottom: 2rem;
}

.panel h3 {
  font-size: 1.2rem;
}

.panel h3,
p {
  padding-top: 0.5rem;
  padding-left: 1rem;
  padding-bottom: 0.5rem;
}

.poster {
  display: block;
  border-radius: 15px;
  margin-top: 1rem;
  margin-left: auto;
  margin-right: auto;
}

.title {
  color: gold;
}

.schedule {
  font-family: "Libre Baskerville";
  font-size: 0.8rem;
}

.schedule p {
  color: white;
}

/* Synopsis Area */
.synopsis {
  border: 1px solid #333;
  border-radius: 15px;
  height: 90%;
  width: 80%;
  margin: 0 auto;
  padding: 1rem;
  display: none;
}

.movie-title {
  color: gold;
  font-size: 1.2rem;
  padding-top: 1rem;
  padding-left: 1rem;
  padding-bottom: 0;
}

.movie-desc {
  font-family: "Libre Baskerville";
  width: 80%;
  padding: 1rem;
}

.screening-buttons p {
  margin-bottom: 0.5rem;
}

.screening-buttons a {
  font-size: 0.8rem;
  background-color: #333;
  border-radius: 5px;
  padding: 0.6rem;
  margin-right: 0.7rem;
}

.screening-buttons a:hover {
  color: black;
  background-color: #bfbfbf;
  transition: 0.6s;
}

<div class="panel-group">
  <div class="panel">
    <a href="#movie-one">
      <div class="left">
        <img src="../../media/poster.jpg" height=355 width=240 class="poster">
      </div>
      <h3 class="title">Movie Title (PG)</h3>
      <div class="schedule">
        <p>Monday - 12PM</p>
        <p>Tuesday - 12PM</p>
        <p>Wednesday - 6PM</p>
        <p>Thursday - 6PM</p>
        <p>Friday - 6PM</p>
        <p>Saturday - 12PM</p>
        <p>Sunday - 12PM</p>
      </div>
    </a>
  </div>

  <div class="panel">
    <a href="#movie-two">
      <div class="left">
        <img src="../../media/poster.jpg" height=355 width=240 class="poster">
      </div>
      <h3 class="title">Movie Title (PG)</h3>
      <div class="schedule">
        <p>Wednesday - 9PM</p>
        <p>Thursday - 9PM</p>
        <p>Friday - 9PM</p>
        <p>Saturday - 6PM</p>
        <p>Sunday - 6PM</p>
      </div>
    </a>
  </div>
  </div>

  <div class="panel-group">
  <div class="panel">
      <a href="#movie-three">
      <div class="left">
        <img src="../../media/poster.jpg" height=355 width=240 class="poster">
      </div>
      <h3 class="title">Movie Title (PG)</h3>
      <div class="schedule">
        <p>Monday - 6PM</p>
        <p>Tuesday - 6PM</p>
        <p>Saturday - 3PM</p>
        <p>Sunday - 3PM</p>
      </div>
      </a>
  </div>

  <div class="panel">
    <a href="#movie-four">
      <div class="left">
        <img src="../../media/poster.jpg" height=355 width=240 class="poster">
      </div>
      <h3 class="title">Movie Title (PG)</h3>
      <div class="schedule">
        <p>Wednesday - 12PM</p>
        <p>Thursday - 12PM</p>
        <p>Friday - 12PM</p>
        <p>Saturday - 9PM</p>
        <p>Sunday - 9PM</p>
      </div>
    </a>
  </div>
  </div>
  <br>

  <!-- Synopsis Area -->
  <div class="synopsis">
  <div id="#movie-one">
    <h3 class="movie-title">Movie Title (PG)</h3>
    <div class="trailer">
      <p class="movie-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <iframe width="560" height="315" src="https://www.youtube.com"></iframe>
    </div>
    <div class="screening-buttons">
      <a href="#">Monday - 12PM</a>
      <a href="#">Tuesday - 12PM</a>
      <a href="#">Wednesday - 6PM</a>
      <a href="#">Thursday - 6PM</a>
      <a href="#">Friday - 6PM</a>
      <a href="#">Saturday - 12PM</a>
      <a href="#">Sunday - 12PM</a>
    </div>
    <br>
  </div>
  </div>
  <br>
  <div class="synopsis">
  <div id="#movie-two">
    <h3 class="movie-title">Movie Title (PG)</h3>
    <div class="trailer">
      <p class="movie-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <iframe width="560" height="315" src="https://www.youtube.com"></iframe>
    </div>
    <div class="screening-buttons">
      <a href="#">Wednesday - 9PM</a>
      <a href="#">Thursday - 9PM</a>
      <a href="#">Friday - 9PM</a>
      <a href="#">Saturday - 6PM</a>
      <a href="#">Sunday - 6PM</a>
    </div>
    <br>
  </div>
  </div>
  <br>
  <div class="synopsis">
  <div id="#movie-three">
    <h3 class="movie-title">Movie Title (PG)</h3>
    <div class="trailer">
      <p class="movie-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <iframe width="560" height="315" src="https://www.youtube.com"></iframe>
    </div>
    <div class="screening-buttons">
      <a href="#">Monday - 6PM</a>
      <a href="#">Tuesday - 6PM</a>
      <a href="#">Saturday - 3PM</a>
      <a href="#">Sunday - 3PM</a>
    </div>
    <br>
  </div>
  </div>
  <br>
  <div class="synopsis">
  <div id="#movie-four">
    <h3 class="movie-title">Movie Title (PG)</h3>
    <div class="trailer">
      <p class="movie-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <iframe width="560" height="315" src="https://www.youtube.com"></iframe>
    </div>
    <div class="screening-buttons">
      <a href="#">Wednesday - 12PM</a>
      <a href="#">Thursday - 12PM</a>
      <a href="#">Friday - 12PM</a>
      <a href="#">Saturday - 9PM</a>
      <a href="#">Sunday - 9PM</a>
    </div>
    <br>
  </div>
</div>

编辑:我做了一些更多的研究和this is close到我正在寻找的东西。我尝试用我的代码执行此操作，但仍然不太有效。

Script.js 文件:

$("#movie-one").click(function() {
  let synopsis = $(this).attr(".synopsis");
  $("div").html(synopsis);
});

Answer 1

由于页面上已经存在静态内容，您可以使用 JavaScript 来实现此目的。

我简化了您的示例并添加了一个脚本，该脚本将切换 CSS 类以隐藏和显示电影详细信息:

let selectedMovie = undefined;

// Create an eventlistener that will show the details of a movie. 
let createMovieSelectionHandler = function(movieId) {
    return function() {
        // Hide previously selected movie.
        if (selectedMovie) {
            document.getElementById(selectedMovie).classList.remove('selected');
        }

        // Show selected movie.
        selectedMovie = movieId;
        document.getElementById(selectedMovie).classList.add('selected');
    };
};

// Find all movie elements on the page.
let movies = document.getElementsByClassName('movie');

// Add an eventlistener to each of them.
for (let i = 0; i < movies.length; ++i) {
  movies[i].addEventListener('click', createMovieSelectionHandler(movies[i].dataset.movieId));
}

/* Panels */
.movie {
  border: 1px solid #333;
  border-radius: 15px;
  width: 70%;
  margin: 0 auto;
  margin-bottom: 2rem;
}

.details {
  display: none;
}

.details.selected {
  display: block;
}

<div class="panel-group">
  <div class="movie" data-movie-id="batman">
    <h3>Batman</h3>
  </div>

  <div class="movie" data-movie-id="titanic">
    <h3>Titanic</h3>
  </div>

  <div class="movie" data-movie-id="ghost">
    <h3>Ghost Busters</h3>
  </div>
  
</div>
  <div id="batman" class="details">
    <h3>Batman</h3>
    <p>Lorem ipsum dolor sit amet, conse</p>
  </div>
  <div id="titanic" class="details">
    <h3>Titanic</h3>
    <p>Lorem ipsum dolor sit amet, conse</p>
  </div>
  <div id="ghost" class="details">
    <h3>Ghost Busters</h3>
    <p>Lorem ipsum dolor sit amet, conse</p>
  </div>