使用带有引导程序的循环添加多个事件

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');
});