Javascript 从使用foreach生成的项获取变量

我正在生成一个菜单，其中包含从

select

查询中的

foreach

生成的列表项

我正在打印每行的“名称”。但是，我还想将该行中的一些其他数据存储在变量中，这样当我单击一个

时，我就会得到那些特定的变量

我想用Javascript来实现这一点，这样我就不会重新加载页面

以下是我目前掌握的代码：

$query=“从credenciais选择*传感器，其中环境='1'；
$results=mysqli_查询（$conn，$query）；

如何实现这一点？

以下是代码

<ul class="treeview-menu">
   <?php
    foreach ($results as $result){
         $local = $result['local'];
         $local = substr($local,0,7); ?>
         <li><a class="post" href="#<?=$local;?>"><?=$local;?></a></li>
         <div id="<?=$local;?>">some details...</div>
    <?php } ?>
</ul>

 <?php  foreach ($results as $result){
             $local = $result['local'];
             $local = substr($local,0,7); ?>
             <div id="<?=$local;?>">some details...</div>
  <?php } ?>

如果我答对了，您希望将DB/后端的数据绑定到在foreach循环中创建的每个菜单项元素，然后在item元素上单击event，获取该项的特定数据。如果这就是你的意思，那么还有不止一条路要走。现在，我将向您展示一个示例：当您创建item元素时，您可以创建data属性，将数据作为stringify对象保存，并在单击事件时对其进行解析。在PHP部分，我创建了一个带有内部数组的模拟结果数组作为示例，“other_data”键包含要绑定到item元素的数据，然后在foreach循环中，我们添加“dataother”属性，以包含作为strigify对象的其他数据。我已经为示例提交了“substr”函数，您可以稍后取消提交。带有“显示数据”id的新div仅用于在单击事件时打印每个项目的数据：

<ul class="treeview-menu">
<?php
$results = array(
    array(
        'local' => 'some local 1',
        'other_data' => array(
            'other_data1' => 'some other data 1 from local 1',
            'other_data2' => 'some other data 2 from local 1'
        )
    ),
    array(
        'local' => 'some local 2',
        'other_data' => array(
            'other_data1' => 'some other data 1 from local 2',
            'other_data2' => 'some other data 2 from local 2'
        )
    )
);
$item = '';
foreach ($results as $result){
    $local = $result['local'];
    //$local = substr($local,0,7);
    $other_data = json_encode($result['other_data']);
    $item .= "<li><a class='post' href='#' data-other='$other_data'>$local</a></li>";
}
echo $item;
?>
</ul>
<div id="display-data"></div>

(function(){
    var item = [], item_data = '', item_data_obj = {}, display = {};
    document.addEventListener('DOMContentLoaded', function(){
        display = document.getElementById('display-data');
        item = document.getElementsByClassName('post');
        for (let i = 0; i < item.length; i++){
            item[i].addEventListener('click', function(){
                item_data = this.getAttribute('data-other');
                item_data_obj = JSON.parse(item_data);
                display.innerHTML = this.innerHTML + ' :' + item_data;
            })
        }
    })
})()




在JS部分，我们在菜单的所有项元素上运行for循环，并添加click事件，因此当我们单击某个项时，我们将获得特定数据，然后解析它，以便将其用作对象，在示例中，我们在click事件中将项的特定数据打印为div元素中的字符串（“display data”id）：

<ul class="treeview-menu">
<?php
$results = array(
    array(
        'local' => 'some local 1',
        'other_data' => array(
            'other_data1' => 'some other data 1 from local 1',
            'other_data2' => 'some other data 2 from local 1'
        )
    ),
    array(
        'local' => 'some local 2',
        'other_data' => array(
            'other_data1' => 'some other data 1 from local 2',
            'other_data2' => 'some other data 2 from local 2'
        )
    )
);
$item = '';
foreach ($results as $result){
    $local = $result['local'];
    //$local = substr($local,0,7);
    $other_data = json_encode($result['other_data']);
    $item .= "<li><a class='post' href='#' data-other='$other_data'>$local</a></li>";
}
echo $item;
?>
</ul>
<div id="display-data"></div>

(function(){
    var item = [], item_data = '', item_data_obj = {}, display = {};
    document.addEventListener('DOMContentLoaded', function(){
        display = document.getElementById('display-data');
        item = document.getElementsByClassName('post');
        for (let i = 0; i < item.length; i++){
            item[i].addEventListener('click', function(){
                item_data = this.getAttribute('data-other');
                item_data_obj = JSON.parse(item_data);
                display.innerHTML = this.innerHTML + ' :' + item_data;
            })
        }
    })
})()

（函数（）{
var item=[]，item_data=''，item_data_obj={}，display={}；
document.addEventListener（'DOMContentLoaded'，function（）{
display=document.getElementById（'display-data'）；
item=document.getElementsByClassName（'post'）；
for（设i=0；i