如何创建一个元素中包含多个值的可点击列表？

Question

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

我写的代码有效，但我认为这可能不是解决问题的正确方法，可以写得更好，但我似乎找不到更好的方法。

现在我为在我的案例中作为客户端的每个对象打印一个 <div>。在 div 中，我有四个隐藏的复选框，我使用 javascript 功能在背景上选中和取消选中它们。这些复选框的值是我在 javascript 中需要的，以便在用户选择客户端后进行 API 调用。

我 select 和 deselect 具有 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}); 
 });
}

我正在尝试获取可点击列表 "names"。单击 "name" 时，您想要获得 "name" 以及 "id"、"facebook"、"instagram"、"website".

将 <select> 标签与 this 等多个值一起使用可能会很有用，但我不想要下拉列表。我需要一个可滚动的列表，因为我也为这个列表使用了搜索栏。

有了很多客户，html 会快速增长。如何清理我的 php 代码并保留用户 select 编辑的有关客户端的信息？

提前致谢！

Answer 1

一个好的方法是使用隐藏输入。给你的 div 一个 class 然后

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
 });

如何创建一个元素中包含多个值的可点击列表？

How to create a clickable list with multiple values in an element?

javascript

php

html

hidden-field

clickable