这是我的代码。我不知道我错过了什么。我查看了 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>
最佳答案
list.js需要一个元素作为 init 时的第一个参数。 来自 doc :
new List(id/element, options, values):
id or element *required Id the element in which the list area should be initialized. OR the actual element itself.
所以,如果你改变这一行:
<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>
关于javascript - 为什么当我尝试对列表进行排序时单击按钮时 list.js 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46005855/