Заменить div результатов, если выбран один результат, и добавить, если выбрано несколько - PullRequest
0 голосов
/ 06 августа 2020

У меня есть таблица с записями из api, которая отображает данные пользователей. Изображение пользователя не отображается в таблице, а отображается в отдельном div при нажатии tr.

<div id='users'>
<div class='users-details'>
<table>
 <tr><td id='1' class='user'>User 1</td></tr>
 <tr><td id='2' class='user'>User 2</td></tr>
 <tr><td id='3' class='user'>User 2</td></tr>
 <tr><td id='4' class='user'>User 2</td></tr>
</table>
</div>
<div class="holder-container">
<div class='preview-holder'>
<!-- user data pushed to here -->
  <div class='user-prev'>
   // users details displayed here
  </div>
 </div>
</div>

Вышеупомянутое работает и заменяет данные в div .user-prev при выборе одного пользователя строка. Теперь у меня проблемы с выбором нескольких тд. Я бы хотел очистить user-prev и clone .preview-holder в зависимости от выбранного td .user.

Например, если я выберу user1 tr .user, отобразить сведения о пользователе 1. При выборе user2, user3, user4 удалите предыдущие результаты из .user-prev, продублируйте его 3 раза и обновите результаты для каждого выбранного tr.user.

У меня есть приведенный ниже код, который вызывал проблемы при выборе несколько он иногда дублирует и не очищает первые результаты

$(document).on("click", ".user", function (event) {
 var selected = []; // store selected users id
 $('.user-prev').html(''); // clear div empty
 for (var i = 0; i < ids_arr.length; ++i)
 selected .push({UserIds: ids_arr[i]});
 $.ajax({
  url: "/db/user_api.php",
  data: { func_name: "getUsers", rows: $.toJSON(selected)},
  type: 'post',
  dataType: 'json',
  success: function(res)
  {
   for (var i = 0; i < res.length; ++i) 
   {
     var x = res[i].result[0];
     var count = $("tr.user.selected").length;
   }
   if (count == 1)
    {
      $(".user-prev").html(x.UserName); // display user name, also returns pics
    }
    if (count > 1)
    {
     // duplicate/clone the div as many times as selected [] and populate each user-prev with selected name
       $(".user-prev").clone().append(x.UserName);      }
  }
 });
});

TIA

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...