【发布时间】：2023-04-09 23:33:02
【问题描述】：
这就是我的情况： 我有一个 HTML 表单，它分为 4 个部分，用户可以在其中选择一些复选框和一个下拉列表。 当点击这个列表下的按钮时，被选中的元素会被扔到一个 JS-Object 中。
在那个 HTML 表单下面，我有一个结果列表，它最初是由一个 json 文件生成的。加载页面时会显示 json 文件中的所有对象。现在用户可以在 html 表单中选择一些过滤器来过滤这个列表。
让我告诉你我有什么：
HTML 表单
<form class="filterThisResults">
<ul class="filter-list">
<button type="reset">delete filters</button>
<div class="search-filter-section">
<li>
<h2>Bereich</h2>
</li>
<li>
<input class="filterCheckbx" id="section" type="checkbox" name="section" value="Hochschule">
<label for="check1">Hochschule</label>
</li>
<li>
<input class="filterCheckbx" id="section" type="checkbox" name="section" value="Angewandte Ingenierwissenschaften">
<label for="check2">Angewandte Ingenierwissenschaften</label>
</li>
<li>
<input class="filterCheckbx" id="section" type="checkbox" name="section" value="Bauen & Gestalten">
<label for="check3">Bauen & Gestalten</label>
</li>
<li>
<input class="filterCheckbx" id="section" type="checkbox" name="section" value="BWL">
<label for="check4">BWL</label>
</li>
<li>
<input class="filterCheckbx" id="section" type="checkbox" name="section" value="Informatik">
<label for="check5">Informatik</label>
</li>
<li>
<input class="filterCheckbx" id="section" type="checkbox" name="section" value="Logistik">
<label for="check6">Logistik</label>
</li>
</div>
<div class="search-filter-group">
<li>
<h2>Gruppen</h2>
</li>
<li>
<input class="filterCheckbx" id="group" type="checkbox" name="group" value="Professoren">
<label for="check1">Professoren</label>
</li>
<li>
<input class="filterCheckbx" id="group" type="checkbox" name="group" value="Studenten">
<label for="check2">Studenten</label>
</li>
<li>
<input class="filterCheckbx" id="group" type="checkbox" name="group" value="Angestellte">
<label for="check3">Angestellte</label>
</li>
</div>
<div class="search-filter-location">
<li>
<h2>Standort</h2>
</li>
<li>
<input class="filterCheckbx" id="location" type="checkbox" name="location" value="Kaiserslautern">
<label for="check1">Kaiserslautern</label>
</li>
<li>
<input class="filterCheckbx" id="location" type="checkbox" name="location" value="Primasens">
<label for="check2">Primasens</label>
</li>
<li>
<input class="filterCheckbx" id="location" type="checkbox" name="location" value="Zweibrücken">
<label for="check3">Zweibrücken</label>
</li>
</div>
<div class="search-filter-topic">
<li>
<h2>Thema</h2>
</li>
<li>
<select class="filterCheckbx" id="topic" name="topic" size="3">
<option value="Lorem">Lorem</option>
<option value="Ipsum">Ipsum</option>
<option value="Dolor">Dolor</option>
</select>
</li>
</div>
<li>
<button class="submit-filter" type="submit">Ergebnisse anzeigen</button>
<li>
</ul>
JSON 数据
{
"searchtest" : [
{
"section": "Hochschule",
"group": "Professoren",
"location": "Kaiserslautern",
"date": "HS 2015/11",
"description" : "Lorem ipsum dolor sit amet",
"details" : "VZ",
"deadline" : "27.12.2015",
"topic" : "Lorem"
},
{
"section": "Angewandte Ingenierwissenschaften",
"group": "Studenten",
"location": "Kaiserslautern",
"date": "HS 2016/11",
"description" : "Consetetur sadipscing elitr",
"details" : "TZ",
"deadline" : "01.01.2016",
"topic" : "Ipsum"
},
(...)
]}
将选定的元素推入对象
this.filterChkbx.on('click', function() {
checkedBox.push({
key: this.id,
value: this.value
});
console.log('Selected filter: ', checkedBox);
});
this.submitFilter.on('click', function () {
_this.filterList(checkedBox);
})
这对我有用，直到这里。单击 this.filterChkbx 会将选中项的 id 和值推送到对象 checkedBox。这有效 - 我可以记录 html 公式的选定元素。现在我想过滤我的结果列表。这里 this.myObject 引用了 json 数组“searchtest”。这就是我感到困惑的地方：
我迭代 json 对象，并检查（过滤器对象的）键是否匹配 el.section（它是 json 对象）。如果为真，我必须检查该键的值是否与该 json 对象中的值相同。如果这是真的，请在结果中显示该项目。
filterList : function(filterArr){
var _this = this;
var result = [];
for(var i=0, i < this.myObject.length, i++) {
var el = this.myObject[i];
if (filterArr[i].key === el.section){
}
if (filterArr[i].key === el.group){
}
if (filterArr[i].key === el.location){
}
if (filterArr[i].key === el.topic){
}
}
}
我想用纯 JS/jQuery 来实现这一点。 我希望你们能得到我想要实现的目标。
亲切的问候，大卫
【问题讨论】：
标签： javascript jquery html json