Question

我正在尝试创建一个用户可以选择的名称列表，以选择具有多个隐藏值的对象。我使用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}); 
 });
}

我正在尝试获取可点击的“名称”列表。单击“名称”时，您不仅要获得“名称”，还要获得“ id”，“ facebook”，“ instagram”，“网站”。

将<select>标记与this之类的多个值一起使用可能很有用，但我不希望使用下拉菜单。我需要一个可滚动的列表，因为我也为此列表使用了搜索栏。

有很多客户，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
 });

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

1 个答案: