list.js JavaScript庫不能正常工作

我期待着使用list.js by Jonny。在這裏，在其示例中，我試圖使用與給定here相同的列表代碼。我在我的代碼文件中複製了HTML，CSS和JS部分。另外，我下載並保存了給定的list.js，並將其粘貼到與我的代碼文件相同的目錄中。我正在使用WAMP，當我打開頁面時，搜索功能無法工作，因爲它在線工作。該表不會動態更新，甚至當我點擊sort by name按鈕時它不會更新。list.js JavaScript庫不能正常工作

有人可以告訴可能是什麼問題？謝謝:)

<!DOCTYPE html> 
<html> 
<head> 
<script src="list.js"></script><meta charset=utf-8 /> 
<title>Existing list</title> 
</head> 
<body> 
<script> 
var options = { 
    valueNames: [ 'name', 'born' ] 
}; 

var userList = new List('users', options); 
</script> 
<style> 
.list { 
    font-family:sans-serif; 
    margin:0; 
    padding:20px 0 0; 
} 
.list > li { 
    display:block; 
    background-color: #eee; 
    padding:10px; 
    box-shadow: inset 0 1px 0 #fff; 
} 
.avatar { 
    max-width: 150px; 
} 
img { 
    max-width: 100%; 
} 
h3 { 
    font-size: 16px; 
    margin:0 0 0.3rem; 
    font-weight: normal; 
    font-weight:bold; 
} 
p { 
    margin:0; 
} 

input { 
    border:solid 1px #ccc; 
    border-radius: 5px; 
    padding:7px 14px; 
    margin-bottom:10px 
} 
input:focus { 
    outline:none; 
    border-color:#aaa; 
} 
.sort { 
    padding:8px 30px; 
    border-radius: 6px; 
    border:none; 
    display:inline-block; 
    color:#fff; 
    text-decoration: none; 
    background-color: #28a8e0; 
    height:30px; 
} 
.sort:hover { 
    text-decoration: none; 
    background-color:#1b8aba; 
} 
.sort:focus { 
    outline:none; 
} 
.sort:after { 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 5px solid transparent; 
    content:""; 
    position: relative; 
    top:-10px; 
    right:-5px; 
} 
.sort.asc:after { 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-top: 5px solid #fff; 
    content:""; 
    position: relative; 
    top:13px; 
    right:-5px; 
} 
.sort.desc:after { 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 5px solid #fff; 
    content:""; 
    position: relative; 
    top:-10px; 
    right:-5px; 
} 
</style> 
    <div id="users"> 
    <input class="search" placeholder="Search" /> 
    <button class="sort" data-sort="name"> 
     Sort by name 
    </button> 

    <ul class="list"> 
     <li> 
     <h3 class="name">Jonny Stromberg</h3> 
     <p class="born">1986</p> 
     </li> 
     <li> 
     <h3 class="name">Jonas Arnklint</h3> 
     <p class="born">1985</p> 
     </li> 
     <li> 
     <h3 class="name">Martina Elm</h3> 
     <p class="born">1986</p> 
     </li> 
     <li> 
     <h3 class="name">Gustaf Lindqvist</h3> 
     <p class="born">1983</p> 
     </li> 
    </ul> 

    </div> 
</body> 
</html>

來源

2014-01-16 tigerden

您是否檢查過瀏覽器控制檯中的錯誤，或者是否執行過任何其他基本調試任務？ – Pointy

確實聽起來像你正在使用的.js文件沒有被加載。兩種可能性：它在錯誤的目錄中，在這種情況下，開發人員工具的「網絡」選項卡會告訴您它在哪裏。或者，您的html頁面並不是首先引用.js文件，您需要在'

相關問題