DB的值不在Modal上传递，而是在页面本身传递

Question

我有一个申请人列表页面，我使用此代码在页面中生成每个申请人：

<% ApplicantDAO applicantDAO = new ApplicantDAO();%>
<% for (int i = 0; i < applicantDAO.viewApplicant().size(); i++) {%>
    <div class="column">
        <div class="col-sm-3 col-xs-4">

            <div class="list-group">

                <a class="list-group-item active">
                    <img src="th_1x1.jpg" class="img-responsive" alt="Responsive Image" width="100%" height="100">
                    <h4 class="list-group-item-heading" id="guardName<%=+i%>" id="guardName<%=+i%>"><%=applicantDAO.viewApplicant().get(i).getApplicantFirstName() + " "%>
                        <%=applicantDAO.viewApplicant().get(i).getApplicantLastName()%></h4>
                </a>
                <a class="list-group-item">
                    <p class="list-group-item-text" id="applyingFor<%=+i%>" id="applyingFor<%=+i%>"><%=applicantDAO.viewApplicant().get(i).getApplyingFor()%></p>
                </a>
                <a class="list-group-item" data-toggle="modal" href="#moreDetails">
                    <button class="btn btn-primary btn-lg btn-block" id="moreDetails<%=+i%>">More Details</button>
                </a>

                ...
            </div>

        </div>
    </div>

然后在更多细节按钮中有一个带有此代码的模态：

<div class="modal fade" id="moreDetails">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 class="modal-title">Applicant Information</h3>
            </div>
            <div class="modal-body">
                <h2 class="text-center"><%=applicantDAO.viewApplicant().get(i).getApplicantLastName() + ", "%><%=applicantDAO.viewApplicant().get(i).getApplicantFirstName()%></h2>
                <table class="table table-striped" id="tblGrid">
                    <thead id="tblHead">
                    <tr>
                        <th class="text-left">Category</th>
                        <th class="text-right">Value</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td class="text-left">Height</td>
                        <td class="text-right"><%=applicantDAO.viewApplicant().get(i).getApplicantHeight() + "cm"%></td>

                    </tr>
                    <tr>
                        <td class="text-left">Weight</td>
                        <td class="text-right"><%=applicantDAO.viewApplicant().get(i).getApplicantWeight() + "kg"%></td>

                    </tr>
                    <tr>
                        <td class="text-left">Address</td>
                        <td class="text-right"><%=applicantDAO.viewApplicant().get(i).getApplicantAddress()%></td>

                    </tr>
                    <tr>
                        <td class="text-left">Contact Number</td>
                        <td class="text-right"><%=applicantDAO.viewApplicant().get(i).getApplicantContactNumber()%></td>

                    </tr>
                    <tr>
                        <td class="text-left">Email</td>
                        <td class="text-right"><%=applicantDAO.viewApplicant().get(i).getApplicantEmail()%></td>

                    </tr>
                    <tr>
                        <td class="text-left">Gender</td>
                        <td class="text-right"><%=applicantDAO.viewApplicant().get(i).getApplicantGender()%></td>

                    </tr>
                    <tr>
                        <td class="text-left">Applying For</td>
                        <td class="text-right"><%=applicantDAO.viewApplicant().get(i).getApplyingFor()%></td>

                    </tr>
                    <tr>
                        <td class="text-left">Age</td>
                        <td class="text-right"><%=applicantDAO.viewApplicant().get(i).getApplicantAge()%></td>

                    </tr>
                    <tr>
                        <td class="text-left">Applicant Notes</td>
                        <td class="text-right"><%=applicantDAO.viewApplicant().get(i).getApplicantNotes()%></td>

                    </tr>

                    </tbody>
                </table>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default " data-dismiss="modal">Close</button>

            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

我想要发生的是，当我打开其他申请人的模式时，他们应该显示该申请人的详细信息，但会发生的情况是只出现第一个申请人的详细信息。我该怎么办？

Answer 1

这是一个多模态的工作jsp。重要的是模态id必须与切换模态的href值相同。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
    <h2>Modal Example</h2>
    <% for(int i = 0 ; i<=10;i++){ %>
    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal<%=i%>">Open Modal</button>

    <!-- Modal -->
    <div class="modal fade" id="myModal<%=i%>" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <p>Some text in the modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>
    <%}%>

</div>

</body>
</html>