Использование цикла с начальной загрузки, чтобы добавить несколько событий

Question

Я разработке веб-сайта, который позволяет мне создавать объявления:

При нажатии на знак плюс, окно должно появиться, чтобы показать более подробно, как показано здесь:

Я пытаюсь выполнить цикл и добавить функцию javascript, чтобы информация из каждого объявления появлялась для каждого знака плюс. Однако я столкнулся с проблемой, когда каждый знак плюса вместо этого отображает информацию из первого объявления (тест 2). Мой код ниже:

<% @announcements.each do |announcement| %> 
<!-- sets each announcement to be 3 per row --> 
<div class="col-md-4 announcement-div"> 
    <!-- Title and subject of the announcement --> 
    <p> 
     <span class="topBottom"><%= announcement.subject %></span> 
     <br> 
     <%= announcement.created_at.strftime("%m/%d %Y %I:%M %p") %> 
    </p> 
    <!-- Stars to signify important events --> 
    <% if announcement.importance %> 
     <h2>&#9733;</h2> 
    <% end %> 
    <!-- The plus sign button --> 
    <button type="button" class="btn popup-btn">+</button> 
    <!-- Current announcement Display Code --> 
    <div id="announcementDisplayModal" class="modal"> 
     <span id="announcementDisplayModal-close" class="close" onclick="document.getElementById('announcementDisplayModal').style.display='none'">&times;</span> 
     <div class="modal-content well modal-dimensions"> 
      <h3 class="cardinal borders"> <%= announcement.subject %> </h3> 
     </div> 
    </div> 
</div> 
<% end %> 

И на JavaScript:

<script> 
// Get the modal 
var modal = document.getElementById('announcementDisplayModal'); 

$('.popup-btn').click(function() { 
    modal.style.display = "block"; 
}); 

// Get the <span> element that closes the modal 
var span = document.getElementById("announcementDisplayModal-close"); 

// When the user clicks on <span> (x), close the modal 
span.onclick = function() { 
    modal.style.display = "none"; 
} 
</script> 

Любые идеи о том, как исправить? Я попытался изменить его из getElementById, чтобы получить элемент по типу класса и сменить идентификатор на класс, но это не сработало.

Answer 1

Хорошо, вам нужно заметить, что идентификатор элемента в документе должен быть уникальным. Но в этом случае вы повторяете announcementDisplayModal.

Так, чтобы устранить эту проблему, вместо того, чтобы использовать селектор ID, попробуйте это,

вместо,

$('.popup-btn').click(function() { 
    modal.style.display = "block"; 
}); 

попробовать,

$('.popup-btn').click(function() { 
    $(this).next().css('display', 'block'); 
});