foreachで生成されたアイテムからvarsを取​​得します

Question

selectクエリでforeachから生成されたリストアイテムを含むメニューを生成しています。

各行の「名前」を印刷しています。しかし、私は変数内にその行からのいくつかの他のデータを保存したいので、<li>をクリックすると、それらの特定の変数が得られます。

私はJavascriptでこれを行いたいので、ページをリロードしないでください。

$query = "SELECT * FROM credenciais_sensores where ambiente = '1'"; 
$results = mysqli_query($conn, $query); 

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

は、どのように私はこれを達成することができます

ここでのコードは、私がこれまで持っているのか？私はあなたが正しい、あなたは、foreachループで作成した各メニューの項目の要素にDB /バックエンドからデータをバインドしたい得た場合

Answer 1

はここで、アイテム要素のクリックイベントに、コード

<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 } ?> 

Answer 2

ですアイテムの特定のデータを取得します。もしそれがあなたが何を意味しているのであれば、行く方法は複数あります。ここでは例を示します：アイテム要素を作成するときには、文字列化オブジェクトとしてデータを保持するデータ属性を作成し、クリックイベントで解析することができます。PHP部分では模擬結果配列を作成しました"other_data"キーはitem要素にバインドするデータを含み、foreachループではstrigifyオブジェクトとして他のデータを含む "data-other"属性を追加します。この例では "substr"関数をコミットしましたが、後でコミットできません。 「表示データ」idを持つ新しいdivがちょうどクリックイベントに各項目のデータを印刷するためです：JS部の

<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> 

、我々は、メニューの項目のすべての要素にforループを実行していますクリックイベントを追加すると、アイテムをクリックすると特定のデータが取得され、オブジェクトとして使用できるように解析されます。この例では、アイテムの特定のデータをdivエレメントの文字列として出力します-data "id）クリックイベント：

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