使用自舉一個循環來添加多個事件

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改爲通過類類型獲取元素，並將ID更改爲一個類，但那不起作用。

Answer 1

好了，有一件事你需要注意的是元素的文檔中的ID必須是唯一的。但在這種情況下，您正在重複announcementDisplayModal。

因此，要解決這個問題，而不是使用一個ID選擇，試試這個，

代替，

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

嘗試，

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