Bootstrap模态框仅显示首个用户问题求助（jQuery实现）

你碰到的这个问题很典型——你在代码初始化阶段只获取了第一个复选框的data-user值，之后不管遍历到哪个设备，都一直用这个固定的变量值，所以不管选哪两个设备，模态框里始终显示第一个用户User1。

核心修改点 #

我们需要把每个设备对应的用户信息也存储起来，而不是只存一个全局的user变量。可以修改relations对象，让它每个键（设备名）对应一个包含connect和user的对象，这样在遍历关联关系时，就能拿到当前设备对应的用户了。

修改后的完整代码 #

HTML部分（和原代码一致，无需修改）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Checkboxes -->
<div class="container">
<div class="row">
<div class="col-sm-6">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Connect to</th>
<th>Users</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="case" data-name="Computer1" data-connect="Computer3" data-user="User1"></td>
<td>Computer1</td>
<td>Computer3</td>
<td>User1</td>
</tr>
<tr>
<td><input type="checkbox" name="case" data-name="Computer2" data-connect="Computer3" data-user="User2"></td>
<td>Computer2</td>
<td>Computer3</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" name="case" data-name="Computer3" data-connect="Computer4" data-user="User3"></td>
<td>Computer3</td>
<td>Computer4</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" name="case" data-name="Computer4" data-user="User4"></td>
<td>Computer4</td>
<td></td>
<td>User4</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Input button -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<input type="button" id="checkBtn" value="View" class="btn btn-info">
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Title</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body" id="modaldata">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

JavaScript部分（关键修改处已标注）

$(function() { 
    // cache jQuery objects that we will be re-using
    var checkBoxes = $("input[name=case]");
    var myModal = $("#myModal");
    // 移除原来的单一user变量，改为存储每个设备的完整信息
    var relations = {};
    checkBoxes.each(function() {
        // 每个设备对应一个对象，包含connect和user
        relations[this.dataset.name] = {
            connect: this.dataset.connect,
            user: this.dataset.user
        };
    });
    $('#checkBtn').click(function() {
        // get checked checkboxes
        var checkedBoxes = checkBoxes.filter(":checked");
        // validate first
        if (checkedBoxes.length !== 2) {
            alert("You must check 2 checkbox!");
            return false;
        }
        // build modal body
        var html = "<div class='table-responsive'><table class='table table-bordered'><tr><td align='center'><b>Name</b></td><td align='center'><b>Connect to</b></td><td align='center'><b>User</b></td></tr>";
        var current = checkedBoxes[0].dataset.name,
        end = checkedBoxes[1].dataset.name; 
        while (current) {
            html +="<tr><td>"+current+"</td>";
            // 获取当前设备的关联信息（包含connect和user）
            var currentRelation = relations[current];
            var next = currentRelation.connect;
            // if it is not connected, stop
            if (!next) {
                html = 'Not related';
                break;
            }
            // 这里使用当前设备对应的user
            html +="<td>"+next+"</td><td>"+currentRelation.user+"</td></tr>";
            // if it is the end, stop
            if (next === end) break;
            // start over using connected one
            current = next;
        }
        html+="</table></div>";
        // update modal
        myModal.find('.modal-body').html(html);
        // open the modal dynamically once it is ready
        myModal.modal('show');
    });
});

效果验证 #

现在当你选择Computer1和Computer4时，模态框会依次显示：

• Computer1 → Computer3，用户User1
• Computer3 → Computer4，用户User3
• 最后到达Computer4，符合你的预期。

如果选择其他组合，比如Computer2和Computer4，也会正确显示对应的User2、User3和User4。

内容的提问来源于stack exchange，提问作者user9484230