【发布时间】：2021-09-20 13:07:51
【问题描述】：
在我的浏览器 Firefox 和 Chrome 中，我没有收到任何错误或警告。这只是练习。我正在学习 javascript 和动态 HTML 课程。如果有人愿意查看我的代码并告诉我我做错了什么，我将不胜感激。一定有什么地方我做错了。
我想在页面加载时创建新的 div。这些 div 将显示为一个有序组，该组会根据 JSON 文件中的外部数据而变化。我需要使用 for 循环来执行此操作，因为需要 100 多个 div。
HTML：
<!doctype html>
<html lang="fa" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container mt-5">
<div id="showFilters">
<!-- GROUP -->
</div>
<div class="w-100 text-center mt-4">
<p>Add new group</p>
<a id="addFilter" class="bg-primary text-white pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">
<i class="fas fa-plus"></i>
</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
let count = 0;
$('#addFilter').click(function () {
count++;
let html = '<div class="position-relative">'+
'<div class="row">'+
'<div class="col-md-4 mb-3">'+
'<label for="name">Name</label>'+
'<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
'</div>'+
'<div class="col-md-4 mb-3">'+
'<label for="latin">Latin</label>'+
'<input type="text" id="latin" class="form-control" name="filters['+count+'][latin]">'+
'</div>'+
'<div class="col-md-4 mb-3">'+
'<label for="field">Select a field</label>'+
'<select id="field" class="form-select" name="filters['+count+'][field]">'+
'<option value="1">CheckBox</option>'+
'<option value="2">Color</option>'+
'</select>'+
'</div>'+
'</div>'+
'<div id="showGroups"> '+
'</div>'+
'<div class="w-100 text-center">'+
'<p>Add new subgroup.</p>'+
'<a onclick="addChildFilter()" class="bg-danger text-info pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">'+
'<i class="fas fa-plus"></i>'+
'</a>'+
'</div>'+
'</div>';
$('#showFilters').append(html);
});
function addChildFilter() {
count++;
let selectedField = $('#field').val();
if (selectedField == 1) {
let html = '<div class="w-100">'+
'<div class="col-md-4 mb-3 position-relative">'+
'<label for="name">Check Box Name</label>'+
'<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
'</div>'+
'</div>';
$('#showGroups').append(html);
}
if (selectedField == 2) {
let html = '<div class="position-relative">'+
'<div class="row">'+
'<div class="col-md-6 mb-3">'+
'<label for="name">Color Name</label>'+
'<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
'</div>'+
'<div class="col-md-6 mb-3">'+
'<label for="code">Code Color</label>'+
'<input type="text" id="code" class="form-control jscolor" name="filters['+count+'][code]">'+
'</div>'+
'</div>'+
'</div>';
$('#showGroups').append(html);
}
}
</script>
</body>
</html>
【问题讨论】：
标签： javascript jquery bootstrap-5