在值中使用与号 (&) 时 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;替换为&amp;amp;,所以需要在过滤功能上替换回来:

return activeFilters.indexOf(item.values().category.replace(/&amp;/g, "&")) > -1;

【讨论】:

【参考方案2】:

List.js 的实现方式似乎存在问题:搜索 list.js source on GitHub 会发现很多对元素 innerHTMLouterHTML 属性的引用,但没有引用 textContentinnerHTML 属性。

记录传递给userList.filter 函数的item 参数,item._values 显示为

 _values: Object  name: "", category: "Arts &amp; Crafts" 

很明显list.js 正在使用 HTML 内容来实现过滤,并获取(或计算)Arts &amp;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("&", "&amp;");  // 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 不起作用的主要内容,如果未能解决你的问题,请参考以下文章

TestNG 参数在值中声明变量问题

jQuery获取特定的选项标签文本并将动态变量放置在值中

在值中搜索字符串并在 VB.NET 中的 LINQ to XML 中获取属性值

如何使用与号 (&) 替换匹配模式中的字符

Sass 使用与号 (&) 和类型选择器组合父级

了解单个与号运算符 (&) 在整数上的行为