Рубрикатор по алфавиту
Добрый день, коллеги.
Помогите решить задачку. На страницу выводится список неких объектов в алфавитном порядке. Допустим, растений. И алфавитный указатель, в котором буквы, для которых на странице есть растения, оформлены ссылками, а остальные - просто текст. Вопрос в том, какой на эти ссылки прикрепить код, чтобы по клику на них скрывались все растения, кроме начинающихся на эту букву. Вот пример. На страничке есть Арбуз, Алыча, Слива, Яблоко. Соответственно, в указателе ссылками являются А, С, Я. По клику на А на страничке должны остаться только Арбуз и Алыча, всё остальное должно скрыться. По идее, это не так сложно, но никак не соображу, как это сделать. |
MAzZYBiG,
можно html, а ещё лучше обьект с данными. |
Не очень понял.
Может есть какие-нибудь более-менее готовые варианты? А то поиском тяжело такое искать |
MAzZYBiG,
скажем это обьект
{"А" : ["Арбуз","Алыча"], "С" : ["Слива"]}
или как оно у вас и обьект и html |
Если у вас данные представлены, как показал Рони, то вот так примерно (можно и покороче, но лень думать)
var data = {"А" : ["Арбуз","Алыча"], "С" : ["Слива"], "В" : ["Виноград", "Вишня"]};
function displayData(data){
var body = document.body;
for(var val in data){
var span = document.createElement('span');
span.innerHTML = val
span.className = "selected"
body.appendChild(span)
}
}
function filterData(el){
var r = document.getElementById('result')
var arr = [];
for(i in data) {
i == el? arr.push(data[i]):'';
}
var e = arr.join(', ')
r.innerHTML = e
}
displayData(data)
var clicked = document.querySelectorAll('.selected');
for(var i = 0; i<clicked.length; i++){
clicked[i].addEventListener('click', function(event){
filterData.call(null, event.target.innerHTML)
})
}
======================================= <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div id="result"></div> </body> </html> Вот ссылка на песочницу |
Цитата:
|
laimas,
а как узнать что скрывать? парсить какую-то data или выборку по классу икс делать? нужно же знать связанное или как то связать, от чего плясать-то :) ? |
Ну а как табуляторы, аккордеоны работают? Раскрывается же связанное с кнопкой и проблем нет. Я так думаю, что уж если списки и нужен рубрикатор, то это уже сортировано по алфавиту, а связать списки с литерами не проблема.
|
laimas,
данные проще брать из готового обьекта, то что ты пишешь я не понимаю, извини, или понимаю как опять парсить что-то. |
рони, если клиент сам готовит списки, то да, но если списки отдает сервер, ну что сложного связать их с литерами. Пусть речь об UTF, код А = 1040, щелкнули по литере А, получили ее код, показали список, например list + А.charCodeAt.
|
| Часовой пояс GMT +3, время: 14:20. |