如何修复Modal中关联数据选中后仍显示‘无关联’的问题？

AI 小北

2026-5-28

我来帮你搞定这个问题～你的代码目前有两个核心问题导致了这个bug，咱们一步步修复：

问题根源

你直接用text()替换modal-body的内容，这会把里面的network-container元素直接覆盖掉——下次打开Modal时，就算是关联数据，也没地方渲染网络了，而且之前的“Not related”文本也不会自动消失。
你没有明确判断是否真的找到了关联关系，只在遍历中断时设置了提示，但没在找到关联时重置Modal的状态。

修复方案

第一步：调整Modal的HTML结构

先给modal-body加一个专门放无关联提示的元素，和网络容器分开，避免互相覆盖：

<div class="modal-body">
  <div id="network-container" style="height:500px;width:600px;"></div>
  <div id="no-relation-alert" style="display:none; text-align:center; padding: 20px; font-size:18px;">Not related</div>
</div>

第二步：完善JS的点击事件逻辑

修改#checkBtn的点击处理代码，每次点击都先重置状态，遍历结束后根据是否找到关联来切换显示：

$('#checkBtn').click(function() {
  var checkedBoxes = checkBoxes.filter(":checked");
  if (checkedBoxes.length !== 2) {
    alert("You must check 2 checkbox!");
    return false;
  }
  
  // 先清空之前的节点和边数据，避免残留
  nodes = [];
  edges = [];
  
  // 重置Modal显示状态：默认显示网络容器，隐藏提示
  $('#network-container').show();
  $('#no-relation-alert').hide();
  
  var current = checkedBoxes[0].dataset.name, 
      end = checkedBoxes[1].dataset.name;
  var id = 1;
  var isRelated = false; // 标记是否找到有效关联
  
  while (current) {
    nodes.push({id: id, label: current, shape: 'box'});
    
    // 如果当前节点就是选中的第二个节点，说明直接关联
    if (current === end) {
      isRelated = true;
      break;
    }
    
    var next = relations[current];
    // 没有下一个节点，说明无关联，中断遍历
    if (!next) {
      break;
    }
    
    var label = users[current] || "";
    edges.push({from: id, to: id + 1, label: label,font: {align: 'top'}, arrows: {to: true}});
    
    // 如果下一个节点就是目标节点，标记关联成功并添加节点
    if (next === end) {
      nodes.push({id: id + 1, label: next, shape: 'box'});
      isRelated = true;
      break;
    }
    
    current = next;
    id++;
  }
  
  // 根据关联状态切换显示内容
  if (!isRelated) {
    $('#network-container').hide();
    $('#no-relation-alert').show();
  }
  
  myModal.modal('show');
});

第三步：优化drawNetwork函数

把函数里清空全局变量的代码去掉，因为我们已经在点击事件里提前清空了，避免重复操作：

function drawNetwork() {
  var container = document.getElementById('network-container');
  var data = { nodes: nodes, edges: edges };
  var width = 600;
  var height = 500;
  var options = {
    width: width + 'px',
    height: height + 'px',
    edges: { smooth: false },
    physics: false,
    interaction: { hover: true, dragNodes: true, zoomView: false, dragView: false }
  };
  var network = new vis.Network(container, data, options);
}

效果验证

现在你再测试：

选中无关联的两个数据（比如Data1和Data3），Modal会显示“Not related”
选中有关联的两个数据（比如Data1和Data2），Modal会正常渲染关系网络

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