javascript - 动态构造手风琴并触发它 - jQuery
问题描述
我有 3 个动作按钮
我已遵循此文档 https://getbootstrap.com/docs/4.3/components/collapse/
这是我的(i)
按钮
<a data-device-mac="BCAEC5DA2D87" class="stats-modify-btn" title="Device Info" data-toggle="collapse" href="#info-BCAEC5DA2D87" role="button" aria-expanded="false" aria-controls="info-BCAEC5DA2D87">
<i class="fa fa-info ml15"></i>
</a>
然后,我也有这个
$('.stats-modify-btn').click(function() {
console.log($(this).attr("data-device-mac"));
var deviceMac = $(this).attr("data-device-mac");
var title = $(this).attr("title");
var infoAccordion = `
<div class="collapse row stats-device-table detail-slider" id="info-${device.device_mac}">
<div class="col-sm-6" id="device_status_value">
${device.display_activity}
</div>
</div>
`;
if(title == "Device Info"){
console.log('show Device Info');
$('#tr-'+ deviceMac).append(infoAccordion).show();
}
});
我不知道为什么手风琴没有触发。
是否尝试触发但实际的 DOM 还不存在?我如何确定?
解决方案
您可以检查其中是否#tr-BCAEC5DA2D87
有任何 div,即:collapse
或没有,如果长度是0
然后在其中附加新的 div。此外,您需要使用此条件,以便在您的 div 中不附加多个元素。
演示代码:
$('.stats-modify-btn').click(function() {
var device = {
"device_mac": "BCAEC5DA2D87"
}
var deviceMac = $(this).attr("data-device-mac");
var title = $(this).attr("title");
//check if the div has .collapse inside it
if ($('#tr-' + deviceMac + " .collapse").length == 0) {
var infoAccordion = `
<div class="collapse row stats-device-table detail-slider" id="info-${device.device_mac}">
<div class="col-sm-6" id="device_status_value">
somethingss
</div>
</div>
`;
if (title == "Device Info") {
$('#tr-' + deviceMac).append(infoAccordion)
}
}
});
<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">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 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>
<a data-device-mac="BCAEC5DA2D87" class="stats-modify-btn" title="Device Info" data-toggle="collapse" href="#info-BCAEC5DA2D87" role="button" aria-expanded="false" aria-controls="info-BCAEC5DA2D87">
<i class="fa fa-info ml15">i</i>
</a>
<div id="tr-BCAEC5DA2D87">
</div>
推荐阅读
- php - 如何跟踪倒数计时器并存储时间以备后用
- javascript - 如何使用 jQuery 在表格行单击时过滤表格中的数据?
- python - 无法安装深度动画师
- sql - 如何从包含 postgresql 的所有列的表中查找 Min 和 Max 行
- php - 文本框未填充来自 URL 的数据?
- julia - Julia 惯用的捕捉异常的方式,除了中断?
- c# - 上传 30 MB 以上 ASP.NET Core 3.1 时出现 504 错误
- powerbi - Power BI 视觉对象中的时间框架(又名 Sprint)字段出现故障
- django - 有没有办法用组件构建页面
- python - 使用 for 循环在列表中搜索值并打印搜索结果