如何在元素中创建具有多个值的可点击列表

Question

我正在尝试创建用户可以选择的名称列表，以选择具有多个隐藏值的对象。我与PHP后端合作。

我编写的代码作品，但我认为这可能不是解决问题的正确方法，并且可以更好地写出问题，但我似乎找不到更好的方法。

现在，我为我的情况下的每个对象打印一个<div>。在DIV中，我有四个隐藏的复选框，我使用JavaScript函数在背景上检查并取消选中。这些复选框的值是用户选择客户端后的JavaScript在API调用中所需的值。

i选择并取消选择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}); 
 });
}

我正在尝试获取可单击的"名称"列表。单击"名称"时，您想获得"名称"，也要获得" ID"，" Facebook"，" Instagram"，"网站"。

使用具有多个值的<select>标签可能很有用，但我不想下拉。我需要一个可滚动列表，因为我也有搜索栏用于此列表。

与许多客户一起，HTML会很快增长。如何清洁我的PHP代码并保留有关用户选择的客户端的信息？

预先感谢！

Answer 1

可以使用隐藏的输入。给您的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
 });