부트스트랩이 있는 루프를 사용하여 여러 이벤트 추가 (Using a loop with bootstrap to add multiple events)

문제 설명

부트스트랩이 있는 루프를 사용하여 여러 이벤트 추가 (Using a loop with bootstrap to add multiple events)

공지사항을 작성할 수 있는 웹사이트를 디자인 중입니다.

더하기 기호를 클릭하면 창이 나타납니다.

각 공고의 정보가 각 더하기 기호. 하지만, 각 더하기 기호가 대신 첫 번째 알림(테스트 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 %>

자바스크립트:

<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를 클래스로 변경하려고 시도했지만 작동하지 않았습니다.

참조 솔루션

방법 1:

Okay, one thing you need to notice is the ID of an element in a document must be unique. But in this case you are repeating announcementDisplayModal.

So to fix this problem instead of using an ID selector, try this,

instead of,

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

try,

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

(by S Mittal、akhil.cs)

참조 문서

1. Using a loop with bootstrap to add multiple events (CC BY‑SA 2.5/3.0/4.0)