Question

我正在尝试在我页面上的现有列表中设置list.JS。这是我尝试使用

的简化版本

<html>
<head>
</head>
<body>
<div id="list-container">
    <input class="search" placeholder="Search">
    <button class="sort" data-sort="name">
        Sort by name
    </button>
    <ul class="buisList">
        <li class="even" id="1">
            <div class="buisName"><a class="buisClick" href="javascript:void(0);"><span class="name">Century 21</span></a></div>
            <div class="buisDesc"><a class="buisClick" href="javascript:void(0);"><span class="desc">Century 21 Real Estate LLC is an American real estate agent franchise company founded in 1971. The System consists of approximately 6,900 independently owned and operated franchised broker offices in 78 countries and territories worldwide with over 101,000 sales professionals.</span></a></div>
        </li>
        <li class="odd" id="2">
            <div class="buisName"><a class="buisClick" href="javascript:void(0);"><span class="name">Michaels</span></a></div>
            <div class="buisDesc"><a class="buisClick" href="javascript:void(0);"><span class="desc">Michaels Stores, Inc. is an arts and crafts retail chain. It currently operates more than 1262 stores (consisting of 1,145 Michaels stores in the 49 states and Canada and 118 Aaron Brothers stores) as of May 31, 2014.</span></a></div>
        </li>
        <li class="even" id="3">
            <div class="buisName"><a class="buisClick" href="javascript:void(0);"><span class="name">GameStop</span></a></div>
            <div class="buisDesc"><a class="buisClick" href="javascript:void(0);"><span class="desc">GameStop is an American video game, consumer electronics, and wireless services retailer. The company is headquartered in Grapevine, Texas, United States and operates 6,457 retail stores throughout the United States, Canada, Australia, New Zealand, and Europe.</span></a></div>
        </li>
        <li class="odd" id="4">
            <div class="buisName"><a class="buisClick" href="javascript:void(0);"><span class="name">eBay Inc.</span></a></div>
            <div class="buisDesc"><a class="buisClick" href="javascript:void(0);"><span class="desc">eBay Inc. is an American multinational corporation and e-commerce company, providing consumer to consumer &amp; business to consumer sales services via Internet.</span></a></div>
        </li>
        <li class="even" id="5">
            <div class="buisName"><a class="buisClick" href="javascript:void(0);"><span class="name">Bank of America</span></a></div>
            <div class="buisDesc"><a class="buisClick" href="javascript:void(0);"><span class="desc">Bank of America is an American multinational banking and financial services corporation headquartered in Charlotte, North Carolina. It is the second largest bank holding company in the United States by assets.</span></a></div>
        </li>
    </ul>
</div>

<script type="text/javascript">
    var options = {
        valueNames: [ 'name', 'desc' ]
    };

    var newList = new List('list-container', options);
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script>
</body>
</html>

我查看了他们网站上提供的示例代码，我认为我正确地遵循了准则...但是当我尝试与输入字段或“按名称排序”按钮进行交互时，没有发生的情况。

有什么想法吗？

Answer 1

List.js需要知道您在列表容器上使用的类。这对我有用：

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script>
<script type="text/javascript">
    var options = {
        valueNames: [ 'name', 'desc' ],
        listClass: 'buisList'
    };

    var newList = new List('list-container', options);
</script>

此处的完整页面：http://codepen.io/anon/pen/eNQaOg

List.JS没有做任何明显的事情

1 个答案: