Форум

MAzZYBiG · #1 (**permalink**) 24.05.2016, 10:46

Добрый день, коллеги.
Помогите решить задачку.

На страницу выводится список неких объектов в алфавитном порядке. Допустим, растений. И алфавитный указатель, в котором буквы, для которых на странице есть растения, оформлены ссылками, а остальные - просто текст.
Вопрос в том, какой на эти ссылки прикрепить код, чтобы по клику на них скрывались все растения, кроме начинающихся на эту букву.

Вот пример.
На страничке есть Арбуз, Алыча, Слива, Яблоко.
Соответственно, в указателе ссылками являются А, С, Я. По клику на А на страничке должны остаться только Арбуз и Алыча, всё остальное должно скрыться.

По идее, это не так сложно, но никак не соображу, как это сделать.

рони · #2 (**permalink**) 24.05.2016, 11:02

MAzZYBiG,
можно html, а ещё лучше обьект с данными.

MAzZYBiG · #3 (**permalink**) 25.05.2016, 20:47

Не очень понял.

Может есть какие-нибудь более-менее готовые варианты? А то поиском тяжело такое искать

рони · #4 (**permalink**) 25.05.2016, 21:17

MAzZYBiG,
скажем это обьект

{"А" : ["Арбуз","Алыча"], "С" : ["Слива"]}

или как оно у вас и обьект и html

Царь Леонид · #5 (**permalink**) 25.05.2016, 23:44

Если у вас данные представлены, как показал Рони, то вот так примерно (можно и покороче, но лень думать)

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 · #6 (**permalink**) 26.05.2016, 09:50

Сообщение от рони

а ещё лучше обьект с данными

Почему? По идее списки уже приходят сортированные по алфавиту, и если скрытые, то проще показать связанное или я чего-то не дополнял?

рони · #7 (**permalink**) 26.05.2016, 10:43

laimas,
а как узнать что скрывать? парсить какую-то data или выборку по классу икс делать? нужно же знать связанное или как то связать, от чего плясать-то

?

laimas · #8 (**permalink**) 26.05.2016, 10:55

Ну а как табуляторы, аккордеоны работают? Раскрывается же связанное с кнопкой и проблем нет. Я так думаю, что уж если списки и нужен рубрикатор, то это уже сортировано по алфавиту, а связать списки с литерами не проблема.

рони · #9 (**permalink**) 26.05.2016, 11:04

laimas,
данные проще брать из готового обьекта, то что ты пишешь я не понимаю, извини, или понимаю как опять парсить что-то.

laimas · #10 (**permalink**) 26.05.2016, 11:20

рони, если клиент сам готовит списки, то да, но если списки отдает сервер, ну что сложного связать их с литерами. Пусть речь об UTF, код А = 1040, щелкнули по литере А, получили ее код, показали список, например list + А.charCodeAt.

Форум

Справочник

Discord чат

Курсы javascript