jQuery通訊錄首字母是一種快速查找聯系人的方法,通過點擊字母表中的某個字母,可以快速顯示該字母對應的聯系人列表。
$(function() { var contacts = [ {name: '張三', tel: '123456'}, {name: '李四', tel: '234567'}, {name: '王五', tel: '345678'}, {name: '趙六', tel: '456789'}, {name: '錢七', tel: '567890'}, {name: '孫八', tel: '678901'}, {name: '周九', tel: '789012'}, {name: '吳十', tel: '890123'}, ]; // 生成字母表 var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; var html = ''; for (var i = 0; i < letters.length; i++) { html += '<a href="#' + letters[i] + '">' + letters[i] + '</a>'; } $('#letters').html(html); // 生成聯系人列表 var html = ''; for (var i = 0; i < contacts.length; i++) { html += '<li><p>' + contacts[i].name + '</p><p>' + contacts[i].tel + '</p></li>'; } $('#contacts').html(html); // 綁定字母表點擊事件 $('#letters a').click(function() { var letter = $(this).attr('href').slice(1); var index = 0; for (var i = 0; i < contacts.length; i++) { if (contacts[i].name.slice(0, 1).toUpperCase() == letter) { index = i; break; } } $('#contacts').animate({scrollTop: $('#contacts li').eq(index).position().top}, 300); }); });
以上代碼中,首先定義了一個包含聯系人信息的數組,在頁面加載完成后生成字母表和聯系人列表,并綁定字母表點擊事件。點擊字母表中的某個字母后,通過循環遍歷聯系人數組,找到第一個以該字母開頭的聯系人,然后使用animate函數將聯系人列表滾動到指定位置。