在值中使用与号 (&) 时 List.js 不起作用
Posted
技术标签:
【中文标题】在值中使用与号 (&) 时 List.js 不起作用【英文标题】:List.js not working when using an ampersand (&) in value 【发布时间】:2020-07-17 22:49:25 【问题描述】:使用 & 符号时,无论是显式为 &
还是使用 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>
关于如何允许与符号作为过滤类别名称的任何想法?谢谢。
【问题讨论】:
【参考方案1】:浏览器将&amp;
替换为&amp;
,所以需要在过滤功能上替换回来:
return activeFilters.indexOf(item.values().category.replace(/&/g, "&")) > -1;
【讨论】:
【参考方案2】: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 &amp; Crafts
作为它在用于过滤列表的 category
类元素中寻找的 HTML 内容。
预测解决问题的解决方案在实践中有效:在处理过滤器按钮输入更改时,将data-value
属性中保存的文本转换为list.js
正在使用的“text/hmtl”格式(而不是保留它作为“文本/纯文本”),然后将其推入activeFilters
数组:
// 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;
);
);
【讨论】:
以上是关于在值中使用与号 (&) 时 List.js 不起作用的主要内容,如果未能解决你的问题,请参考以下文章