我需要在HTML模态窗口显示来自json的信息。我有12个按钮,当用户点击它时,我想显示来自json文件的本月数据。
let myJson;
$(`button`).on(`click`, function() {
let id_popup = this.attributes[`data-id`].value;
$.getJSON(`content/js/monthjson.json`, function(months) {
let month = Object.values(months).filter(function(data) {
return data.id === id_popup;
});
$(`.modal-title`).text(month.georgiamonth);
$(`.modal-body`).html(month.description);
});
});
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": ""
}
]
}
<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">×</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>
1条答案
按热度按时间h22fl7wq1#
首先,您似乎在jQuery选择器和其他地方使用了反号而不是撇号。这不是标准的,虽然它可能会起作用,但我建议您不要使用它,即使只是出于惯例的原因。我在这里进行了转换。
然后,我们将使用Bootstrap的模态show事件,从事件上的
relatedTarget
获取ID,而不是添加click处理程序。最后,我们将使用
find()
方法从数组中获取相应的数据对象。额外提示:在页面加载时获取数据一次,而不是每次单击按钮时。也就是说,如果您不希望数据频繁更改的话。