为什么当我尝试对列表进行排序时单击按钮时 list.js 不工作

Question

这是我的代码。我不知道我错过了什么。我去了 list.js 文档，并遵循了每一步。我什至去了jfiddle并做了一个例子，它奏效了。我认为我做错了什么可能是因为我使用的是 ejs。有人可以帮我吗。下面是我的 HTML 代码和 Javascript。

谢谢

<div class="client-names">
  <!-- class="search" automagically makes an input a search field. -->
  <input class="search" placeholder="Search" />
  <!-- class="sort" automagically makes an element a sort buttons. The date-sort value decides what to sort by. -->
  <button class="sort" data-sort="fname">
                        Sort By First Name
                      </button>
  <button class="sort" data-sort="lname">
                      Sort by Last Name
                        </button>

  <ul class="list">
    <% clients.forEach(function(client) { %>

      <li>
        <span class="lname"><%= client.lname %></span>
        <span class="fname"><%= client.fname %></span>
        <br>
        <form class="delete-form" action="/clients/<%= client._id %>?_method=DELETE" method="POST">
          <button class="btn btn-danger btn-md" data-id="<%= client._id %>" id="delete-client">Delete Client</button>
        </form>
        <a href="/clients/<%= client._id %>" data-id="<%= client._id %>" class="btn btn-primary btn-md view-client-button">View Client</a>
      </li>
      <% }); %>
  </ul>
</div>

JAVASCRIPT

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<script src="/js/main.js"></script>
<script type="text/javascript">
  var options = {
    valueNames: ['lname', 'fname']
  };

  var clientList = new List('client-names', options);
</script>

Answer 1

list.js 需要一个元素作为 init 的第一个参数。 来自doc：

新列表（id/元素、选项、值）：

id or element *required ID 应该在其中初始化列表区域的元素。或实际元素本身。

所以，如果你改变这一行：

<div class="client-names">

到：

<div id="client-names">

您的代码有效。

相反，如果您需要使用类名，则需要按类获取元素，如：

var clientList = new List(document.getElementsByClassName('client-names')[0], options);

如何排序...

将点击事件处理程序添加到排序按钮并调用sort method就足够了：

$('.sort').on('click', function(e) {
    clientList.sort(this.dataset.sort, { order: "asc" });
})

或在 javascript 中：

document.querySelectorAll('.sort').forEach(function(ele, idx) {
    ele.addEventListener('click', function(e) {
        clientList.sort(this.dataset.sort, { order: "asc" });
    });
});

var options = {
    valueNames: ['lname', 'fname']
};

var clientList = new List(document.getElementsByClassName('client-names')[0], options);

document.querySelectorAll('.sort').forEach(function(ele, idx) {
    ele.addEventListener('click', function(e) {
        clientList.sort(this.dataset.sort, { order: "asc" });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>


<div class="client-names">
    <!-- class="search" automagically makes an input a search field. -->
    <input class="search" placeholder="Search" />
    <!-- class="sort" automagically makes an element a sort buttons. The date-sort value decides what to sort by. -->
    <button class="sort" data-sort="lname">
        Sort By First Name
    </button>
    <button class="sort" data-sort="fname">
        Sort by Last Name
    </button>

    <ul class="list">
        <li>
            <span class="lname">name3</span>
            <span class="fname">name2</span>
            <br>
            <form class="delete-form" action="/clients/<%= client._id %>?_method=DELETE" method="POST">
                <button class="btn btn-danger btn-md" data-id="<%= client._id %>" id="delete-client1">Delete Client</button>
            </form>
            <a href="/clients/<%= client._id %>" data-id="<%= client._id %>" class="btn btn-primary btn-md view-client-button">View Client</a>
        </li>
        <li>
            <span class="lname">name2</span>
            <span class="fname">name5</span>
            <br>
            <form class="delete-form" action="/clients/<%= client._id %>?_method=DELETE" method="POST">
                <button class="btn btn-danger btn-md" data-id="<%= client._id %>" id="delete-client2">Delete Client</button>
            </form>
            <a href="/clients/<%= client._id %>" data-id="<%= client._id %>" class="btn btn-primary btn-md view-client-button">View Client</a>
        </li>
    </ul>
</div>