为什么 includes() 函数不起作用？

Question

我想使用 List.js 制作一个过滤器。我有两个简单的按钮：“买入”和“卖出” 理想情况下，它们应该用作搜索特定单元格值的参考，但我无法使其工作。

这是对象之一：

    "trade": "<span class=\"badge rounded-pill bg-danger text-white\">SELL</span>",
    "date": "18/01/2022",
    "price": "60",
    "quantity": "10"
}

这是过滤器的代码

$('.filter').click(function () {
    var search = $(this).text().toUpperCase(); // val = SELL

    featureList.filter(function (item) {
        return item.values().trade.includes(search);
    });
});

如果我在 includes() 函数中手动将 search 替换为值 "SELL"，我会得到我期望的结果.. 使用变量 no..

此外，有没有办法自动select要搜索的列？我尝试向按钮添加一个 data-filter 属性并设法检索该值，但是如果我尝试以下代码则不起作用

$('.filter').click(function () {
    var col = $(this).data('filter'); // val = trade

    featureList.filter(function (item) {
        return item.values().col.includes('SELL');
    });
});

感谢您帮助我理解我明显做错了什么

Answer 1

您缺少 tbody 元素的 class="list"。这对于 list.js 是必需的。由于贸易单元格中的 span 元素，您的搜索变量在每一端都有空格。通过修剪空格，您的搜索变量可以在 includes() 方法中使用。

$(function() {
  var options = {
    valueNames: ["trade", "date", "price", "quantity"]
  };

  var featureList = new List('tradesTable', options);

  $('.filter').click(function () {
    var search = $(this).text().toUpperCase();

    featureList.filter(function (item) {
      if(item.values().trade.includes(search.trim())){
        return true;
      } else {
        return false;
      }
    });
  });

  $('.clear').click(function () {
    featureList.filter()
   })
});

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script>


<div id="tradesTable">
  <button  class="filter" data-filter="trade">
    Buy
  </button>
  <button class="filter" data-filter="trade">
    Sell
  </button>
  <button class="clear">
    Clear
  </button>
  <table>
    <thead>
      <tr>
        <th class="sort" data-sort="trade">Trade</th>
        <th class="sort" data-sort="date">Date</th>
        <th class="sort" data-sort="price">Price</th>
        <th class="sort" data-sort="quantity">Quantity</th>
      </tr>
    </thead>
    <tbody class="list">
      <tr>
        <td class="trade">
          <span class="badge rounded-pill bg-danger text-white">SELL</span>
        </td>
        <td class="date">18/01/2022</td>
        <td class="price">60</td>
        <td class="quantity">100</td>
      </tr>
      <tr>
        <td class="trade">
          <span class ="badge rounded-pill bg-danger text-white">BUY</span>
        </td>
        <td class="date">18/01/2022</td>
        <td class="price">60</td>
        <td class="quantity">100</td>
      </tr>
      <tr>
        <td class="trade">
          <span class ="badge rounded-pill bg-danger text-white">SELL</span>
        </td>
        <td class="date">18/01/2022</td>
        <td class="price">60</td>
        <td class="quantity">100</td>
      </tr>
      <tr>
        <td class="trade">
          <span class ="badge rounded-pill bg-danger text-white">BUY</span>
        </td>
        <td class="date">18/01/2022</td>
        <td class="price">60</td>
        <td class="quantity">100</td>
      </tr>
    </tbody>
  </table>
</div>

为什么 includes() 函数不起作用？

Why the includes() function is not working?

javascript

jquery

list.js