List.js 在值中使用与号 (&) 时不起作用
List.js not working when using an ampersand (&) in value
当使用 & 符号时,明确地作为 &
或使用 HTML 字符代码作为 &
、List.js 中断。这是代码,适用于第一个过滤器,但不适用于第二个过滤器:
$(function() {
var options = {
valueNames: ["name", "category"]
};
var userList = new List("search-results", options);
var activeFilters = [];
// filter
$(".filter").change(function() {
var isChecked = this.checked;
var value = $(this).data("value");
if (isChecked) {
// add to list of active filters
activeFilters.push(value);
} else {
// remove from active filters
activeFilters.splice(activeFilters.indexOf(value), 1);
}
userList.filter(function(item) {
if (activeFilters.length > 0) {
return activeFilters.indexOf(item.values().category) > -1;
}
return true;
});
});
});
* {
margin: 0;
padding: 0;
font-family: monaco;
}
body {
margin: 0;
padding: 10px;
background: lightgreen;
}
ul {
padding: 10px;
list-style: none;
color: white;
background: blue;
}
ul span {
margin-left: 4px
}
li {
margin: 10px 0
}
.list {
padding: 10px;
background: steelblue;
}
.package {
margin-bottom: 10px;
background: pink;
}
.package .text {
display: block;
}
.package .category {
background: salmon;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.0/list.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="checkbox-btn">
<label>
<input class="filter" type="checkbox" name="history" data-value="History" /><span>History</span>
</label>
</li>
<li class="checkbox-btn">
<label>
<input class="filter" type="checkbox" name="arts & crafts" data-value="Arts & Crafts" /><span>Arts & Crafts</span>
</label>
</li>
</ul>
<div class="results-container">
<div id="search-results">
<div class="list">
<div class="package">
<span class="text">Placeholder Text</span>
<span class="category">History</span>
</div>
<div class="package">
<span class="text">Placeholder Text</span>
<span class="category">Arts & Crafts</span>
</div>
<div class="package">
<span class="text">Placeholder Text</span>
<span class="category">History</span>
</div>
<div class="package">
<span class="text">Placeholder Text</span>
<span class="category">Arts & Crafts</span>
</div>
</div>
</div>
</div>
关于如何允许将 & 符号作为过滤类别名称的任何想法?谢谢。
浏览器将&
替换为&
,所以需要在过滤功能上重新替换:
return activeFilters.indexOf(item.values().category.replace(/&/g, "&")) > -1;
这似乎是 List.js 实现方式的一个问题:搜索 list.js source on GitHub 发现很多对元素 innerHTML
和 outerHTML
属性的引用,但是没有引用 textContent
或 innerHTML
属性。
记录传递给 userList.filter
函数的 item
参数,item._values
显示为
_values: Object { name: "", category: "Arts & Crafts" }
很明显list.js
是用HTML内容实现过滤,得到(或计算)Arts & Crafts
作为它在[=中寻找的HTML内容21=] class 个元素用于过滤列表。
预测解决问题的解决方案在实践中有效:处理过滤器按钮输入更改时,将 data-value
属性中保存的文本转换为 "text/hmtl" 格式,即 list.js
在将其推入 activeFilters
数组之前使用(而不是将其保留为 "text/plain"):
// filter
$(".filter").change(function() {
var isChecked = this.checked;
var value = $(this).data("value");
value = value.replace("&", "&"); // filter value as "text/html"
if (isChecked) {
// add to list of active filters
activeFilters.push(value);
} else {
// remove from active filters
activeFilters.splice(activeFilters.indexOf(value), 1);
}
userList.filter(function(item) {
if (activeFilters.length > 0) {
return activeFilters.indexOf(item.values().category) > -1;
}
return true;
});
});
当使用 & 符号时,明确地作为 &
或使用 HTML 字符代码作为 &
、List.js 中断。这是代码,适用于第一个过滤器,但不适用于第二个过滤器:
$(function() {
var options = {
valueNames: ["name", "category"]
};
var userList = new List("search-results", options);
var activeFilters = [];
// filter
$(".filter").change(function() {
var isChecked = this.checked;
var value = $(this).data("value");
if (isChecked) {
// add to list of active filters
activeFilters.push(value);
} else {
// remove from active filters
activeFilters.splice(activeFilters.indexOf(value), 1);
}
userList.filter(function(item) {
if (activeFilters.length > 0) {
return activeFilters.indexOf(item.values().category) > -1;
}
return true;
});
});
});
* {
margin: 0;
padding: 0;
font-family: monaco;
}
body {
margin: 0;
padding: 10px;
background: lightgreen;
}
ul {
padding: 10px;
list-style: none;
color: white;
background: blue;
}
ul span {
margin-left: 4px
}
li {
margin: 10px 0
}
.list {
padding: 10px;
background: steelblue;
}
.package {
margin-bottom: 10px;
background: pink;
}
.package .text {
display: block;
}
.package .category {
background: salmon;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.0/list.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="checkbox-btn">
<label>
<input class="filter" type="checkbox" name="history" data-value="History" /><span>History</span>
</label>
</li>
<li class="checkbox-btn">
<label>
<input class="filter" type="checkbox" name="arts & crafts" data-value="Arts & Crafts" /><span>Arts & Crafts</span>
</label>
</li>
</ul>
<div class="results-container">
<div id="search-results">
<div class="list">
<div class="package">
<span class="text">Placeholder Text</span>
<span class="category">History</span>
</div>
<div class="package">
<span class="text">Placeholder Text</span>
<span class="category">Arts & Crafts</span>
</div>
<div class="package">
<span class="text">Placeholder Text</span>
<span class="category">History</span>
</div>
<div class="package">
<span class="text">Placeholder Text</span>
<span class="category">Arts & Crafts</span>
</div>
</div>
</div>
</div>
关于如何允许将 & 符号作为过滤类别名称的任何想法?谢谢。
浏览器将&
替换为&
,所以需要在过滤功能上重新替换:
return activeFilters.indexOf(item.values().category.replace(/&/g, "&")) > -1;
这似乎是 List.js 实现方式的一个问题:搜索 list.js source on GitHub 发现很多对元素 innerHTML
和 outerHTML
属性的引用,但是没有引用 textContent
或 innerHTML
属性。
记录传递给 userList.filter
函数的 item
参数,item._values
显示为
_values: Object { name: "", category: "Arts & Crafts" }
很明显list.js
是用HTML内容实现过滤,得到(或计算)Arts & Crafts
作为它在[=中寻找的HTML内容21=] class 个元素用于过滤列表。
预测解决问题的解决方案在实践中有效:处理过滤器按钮输入更改时,将 data-value
属性中保存的文本转换为 "text/hmtl" 格式,即 list.js
在将其推入 activeFilters
数组之前使用(而不是将其保留为 "text/plain"):
// filter
$(".filter").change(function() {
var isChecked = this.checked;
var value = $(this).data("value");
value = value.replace("&", "&"); // filter value as "text/html"
if (isChecked) {
// add to list of active filters
activeFilters.push(value);
} else {
// remove from active filters
activeFilters.splice(activeFilters.indexOf(value), 1);
}
userList.filter(function(item) {
if (activeFilters.length > 0) {
return activeFilters.indexOf(item.values().category) > -1;
}
return true;
});
});