如何使用JavaScript获取电影可用日期并添加至模态框的Div中

Got it, let's fix this step by step. Here's how you can make sure the modal shows the correct available days for each movie when the Reserve button is clicked:

1. Update Your Template Code #

First, we need to adjust the template to store each movie's available days in an accessible way, and fix the button (since it was hidden and had a duplicate ID):

<div> 
  {% for movie in movies %} 
  <!-- Add data-days attribute to store the movie's available days -->
  <div class="movie" data-days="{% for day in movie.field_days %}{{day.entity.label}}{% if not forloop.last %}, {% endif %}{% endfor %}"> 
    {{ movie.title.value }} 
    <img src="{{ file_url(movie.field_image.entity.uri.value) }}"> 
    <p>{{ movie.field_description.value }}</p> 
    <h3>This movie is available on:</h3> 
    <div class="days"> 
      {% for day in movie.field_days %} {{day.entity.label}} {% endfor %} 
    </div> 
    <br> 
    <!-- Remove duplicate ID and hidden style, use a class for selection -->
    <button class="bclass reserve-btn">Reserve</button> 
  </div> 
  {% endfor %} 
</div> 

<!-- The Modal --> 
<div id="myModal" class="modal"> 
  <!-- Modal content --> 
  <div class="modal-content"> 
    <button type="button" class="close" data-dismiss="modal">&times;</button> 
    <h4 class="modal-title">Available days for this movie are:</h4> 
    <div class="modal-body"> 
      <div class="days"></div> 
    </div> 
  </div> 
</div>

Key changes here:

• Added a data-days attribute to each .movie container, which stores all available days as a comma-separated string. This makes it easy for JavaScript to grab the data later.
• Removed the duplicate id="b" (you can't have multiple elements with the same ID!) and replaced it with a unique class reserve-btn to target all buttons.
• Removed style="visibility:hidden" so users can actually click the Reserve button.

2. Add JavaScript to Handle Modal Logic #

Next, add this JavaScript to listen for button clicks, fetch the correct days, and populate the modal:

Option 1: Native JavaScript (No Libraries) #

// Grab all necessary elements
const reserveButtons = document.querySelectorAll('.reserve-btn');
const modal = document.getElementById('myModal');
const modalDaysContainer = modal.querySelector('.modal-body .days');
const closeModalBtn = modal.querySelector('.close');

// Attach click event to each Reserve button
reserveButtons.forEach(button => {
  button.addEventListener('click', () => {
    // Get the days from the parent movie element's data attribute
    const movieDays = button.closest('.movie').dataset.days;
    // Populate the modal's days container
    modalDaysContainer.textContent = movieDays;
    // Show the modal
    modal.style.display = 'block';
  });
});

// Close modal when clicking the X button
closeModalBtn.addEventListener('click', () => {
  modal.style.display = 'none';
});

// Close modal when clicking outside the modal content
window.addEventListener('click', (event) => {
  if (event.target === modal) {
    modal.style.display = 'none';
  }
});

Option 2: jQuery (If You're Using It) #

If you're already using jQuery in your project, this shorter version works too:

$(document).ready(function() {
  // Handle Reserve button clicks
  $('.reserve-btn').click(function() {
    const movieDays = $(this).closest('.movie').data('days');
    $('#myModal .modal-body .days').text(movieDays);
    $('#myModal').show();
  });

  // Close modal when clicking X or outside the modal
  $('.close, #myModal').click(function(e) {
    if (e.target === this) {
      $('#myModal').hide();
    }
  });
});

3. Add Basic Modal CSS #

Make sure your modal is styled correctly (hidden by default, overlay effect, etc.):

/* Modal background overlay */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

/* Modal content box */
.modal-content {
  background-color: #fff;
  margin: 15% auto;
  padding: 2rem;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  position: relative;
}

/* Close button styling */
.close {
  color: #666;
  float: right;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
}

.close:hover {
  color: #000;
}

That's it! Now when you click the Reserve button for any movie, the modal will pop up showing that specific movie's available days.

内容的提问来源于stack exchange，提问作者MajaB