Как создать интерактивный список с несколькими значениями в элементе? - PullRequest
Новая
       23

Как создать интерактивный список с несколькими значениями в элементе?

0 голосов
/ 22 июня 2019

Я пытаюсь создать список имен, из которых пользователь мог выбрать, чтобы выбрать объект с несколькими скрытыми значениями.Я работаю с бэкэндом PHP.

Код, который я написал, работает, но я думаю, что это, вероятно, неправильный подход к проблеме и мог бы быть написан намного лучше, но я не могу найти лучший способ.

Прямо сейчас я печатаю <div> для каждого объекта, который является клиентом в моем случае.В div у меня есть четыре скрытых флажка, которые я проверяю и снимаю на фоне с помощью функции javascript.Значения этих флажков - это то, что мне нужно в javascript для вызова API после того, как пользователь выбрал клиента.

Я выбираю и отменяю выбор с помощью функции javascript. 

foreach($clients as $client) {
 echo '<div class="'.$client->name.'-'.$client->id.' client-style" name="'.$client->name.'">
  <input type="checkbox" class="'.$client->id.'" name="client_id" value="'.$client->id.'">
  <input type="checkbox" class="'.$client->id.'" name="client_fb" value="'.$client->facebook.'">
  <input type="checkbox" class="'.$client->id.'" name="client_insta" value="'.$client->instagram.'">
  <input type="checkbox" " class="'.$client->id.'" name="client_wb" value="'.$client->website.'"></div>';
}

Для каждого элементаЯ создаю обработчик событий при нажатии 

for (var i = 0; i < clientList.length; i++) {
 const {name, id} = clientList[i];

 $(`.${name}-${id}`).on('click', function() {
   selectClientFromList({name, id}); 
 });
}

Я пытаюсь получить список кликабельных «имен».При нажатии «name» вы хотите получить «name», а также «id», «facebook», «instagram», «website».

Может быть полезно использовать тег <select>с несколькими значениями, такими как это , но я не хочу выпадающий список.Мне нужен прокручиваемый список, потому что я также использовал панель поиска для этого списка.

При большом количестве клиентов html будет быстро расти.Как очистить свой php-код и сохранить информацию о клиенте, выбранного пользователем?

Заранее спасибо!

1 Ответ

0 голосов
/ 22 июня 2019

Хорошим подходом может быть использование скрытого ввода.Дайте вашему div класс и затем 

foreach($clients as $client) {
 echo '
  <div class="'. $client->name.'-'.$client->id.' client-style" name="'.$client->name.'">
  <input type="hidden" class="aclass '.$client->id.'" name="client_id" value="'.$client->id.'">
  <input type="hidden" class="aclass '.$client->id.'" name="client_fb" value="'.$client->facebook.'">
  <input type="hidden" class="aclass '.$client->id.'" name="client_insta" value="'.$client->instagram.'">
  <input type="hidden" class="aclass '.$client->id.'" name="client_wb" value="'.$client->website.'"></div>';
}

И затем вместо создания обработчика щелчков каждый раз.Один тоже работает. 

$(`.aclass`).on('click', function() {
   let type = $(this).attr('name'); // client_id or client_fb
   let client_id = $(this).attr('class').replace("aclass",""); // $client->id's value is here
   let value = $(this).val(); // credentials
 });
...