实现点击按钮在HTML模态窗口展示JSON对应月份数据

原代码存在的问题 #

• 事件绑定范围过广：$('button')会选中页面所有按钮（包括模态框内的关闭按钮），触发不必要的逻辑
• 数据类型不匹配：按钮的data-id是字符串，JSON中的id是数字，全等比较（===）会匹配失败
• 数组访问错误：filter方法返回的是数组，直接通过month.georgiamonth访问属性会得到undefined
• 重复请求资源：每次点击都重新请求JSON文件，效率低下；且你已定义本地myJson数据，可直接复用
• 空值未处理：April的description为空，未展示备用的suggestmonths字段

修正后的完整代码 #

HTML部分（无需修改）

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<button type="button" class="get-month-data btn btn-outline-danger btn-sm btn-block get-month-id" data-toggle="modal" data-target="#modelId" data-id="1">Show id 1</button>
<button type="button" class="get-month-data btn btn-outline-info btn-sm btn-block" data-toggle="modal" data-target="#modelId" data-id="2">Show id 2</button>
<button type="button" class="get-month-data btn btn-outline-warning btn-sm btn-block" data-toggle="modal" data-target="#modelId" data-id="3">Show id 3</button>
<button type="button" class="get-month-data btn btn-outline-success btn-sm btn-block" data-toggle="modal" data-target="#modelId" data-id="4">Show id 4</button>
<button type="button" class="get-month-data btn btn-outline-danger btn-sm btn-block" data-toggle="modal" data-target="#modelId" data-id="5">Show id 5</button>
<button type="button" class="get-month-data btn btn-outline-info btn-sm btn-block" data-toggle="modal" data-target="#modelId" data-id="6">Show id 6</button>
<button type="button" class="get-month-data btn btn-outline-warning btn-sm btn-block" data-toggle="modal" data-target="#modelId" data-id="7">Show id 7</button>
<button type="button" class="get-month-data btn btn-outline-success btn-sm btn-block" data-toggle="modal" data-target="#modelId" data-id="8">Show id 8</button>
<button type="button" class="get-month-data btn btn-outline-danger btn-sm btn-block" data-toggle="modal" data-target="#modelId" data-id="9">Show id 9</button>
<button type="button" class="get-month-data btn btn-outline-info btn-sm btn-block" data-toggle="modal" data-target="#modelId" data-id="10">Show id 10</button>
<button type="button" class="get-month-data btn btn-outline-warning btn-sm btn-block" data-toggle="modal" data-target="#modelId" data-id="11">Show id 11</button>
<button type="button" id="btn" class="get-month-data btn btn-outline-success btn-sm btn-block" data-toggle="modal" data-id="12" data-target="#modelId">Show id 12</button>

<div class="modal fade" id="modelId" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"> month title here </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
        description here
      </div>

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

<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

JavaScript部分（修正后）

// 本地月份数据
const myJson = {
  "months": [{
      "id": 1,
      "georgiamonth": "Jan",
      "description": "description Jan month",
      "suggestmonths": ""
    },
    {
      "id": 2,
      "georgiamonth": "Feb",
      "description": "description Feb month",
      "suggestmonths": ""
    },
    {
      "id": 3,
      "georgiamonth": "Mar",
      "description": "description mar month",
      "suggestmonths": ""
    },
    {
      "id": 4,
      "georgiamonth": "April",
      "description": "",
      "suggestmonths": "description April month"
    },
    {
      "id": 5,
      "georgiamonth": "May",
      "description": "description May month",
      "suggestmonths": ""
    },
    {
      "id": 6,
      "georgiamonth": "June",
      "description": "description June month",
      "suggestmonths": ""
    },
    {
      "id": 7,
      "georgiamonth": "July",
      "description": "description July month",
      "suggestmonths": ""
    },
    {
      "id": 8,
      "georgiamonth": "Aug",
      "description": "description Aug month",
      "suggestmonths": ""
    },
    {
      "id": 9,
      "georgiamonth": "Sept",
      "description": "description Sept month",
      "suggestmonths": ""
    },
    {
      "id": 10,
      "georgiamonth": "Oct",
      "description": "description Oct month",
      "suggestmonths": ""
    },
    {
      "id": 11,
      "georgiamonth": "Nov",
      "description": "description Nov month",
      "suggestmonths": ""
    },
    {
      "id": 12,
      "georgiamonth": "Dec",
      "description": "description Dec month",
      "suggestmonths": ""
    }
  ]
};

// 仅给月份按钮绑定点击事件
$('.get-month-data').on('click', function() {
  // 把data-id转为数字，和JSON中的id类型统一
  const id_popup = parseInt($(this).data('id'));
  
  // 用find直接获取匹配的单个月份对象，比filter更高效
  const month = myJson.months.find(data => data.id === id_popup);
  
  if (month) {
    // 设置模态框标题
    $('.modal-title').text(month.georgiamonth);
    // 处理空描述：如果description为空，显示suggestmonths
    const content = month.description || month.suggestmonths;
    $('.modal-body').html(content);
  }
});

关键修改说明 #

1. 精准事件绑定：使用.get-month-data类选择器，只给月份按钮绑定事件，避免触发模态框关闭按钮的逻辑
2. 类型统一：用parseInt()把data-id转为数字，确保和JSON中的数字id能正确匹配
3. 高效获取数据：用find()代替filter()，直接返回匹配的单个对象，无需处理数组
4. 复用本地数据：直接使用已定义的myJson，避免重复请求；若需从外部JSON文件获取，建议缓存数据（比如请求一次后存到变量）
5. 空值处理：当description为空时，自动切换到suggestmonths内容，保证模态框有内容展示

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