Get vars von Elementen, die mit einer foreach generiert werden

Question

Ich erzeuge ein Menü mit Listenelementen, die von einer foreach auf einer select Abfrage generiert werden.

Ich drucke den 'Namen' jeder Zeile. Aber ich wollte auch einige andere Daten aus dieser Zeile in Variablen speichern. Wenn ich also auf <li> klicke, würde ich diese spezifischen Variablen bekommen.

Ich möchte dies mit Javascript tun, damit ich die Seite nicht neu laden.

Hier ist der Code, den ich habe bisher:

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

Wie kann ich das erreichen?

Answer 1

Hier ist der Code

<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

, wenn ich Sie richtig verstanden habe, Sie möchten Daten binden, aus dem DB/Backend jedes Element Element-Menü Sie in der foreach-Schleife erstellt haben, dann auf Element Element Click-Ereignis , erhalten Sie die spezifischen Daten des Artikels. Wenn das das ist, was du damit gemeint hast, gibt es mehr als einen Weg zu gehen. Vorläufig werde ich Ihnen ein Beispiel zeigen: Wenn Sie die Elementelemente erstellen, können Sie ein Datenattribut erstellen, um die Daten als ein Stringify-Objekt zu halten und es auf Klickereignis zu parsen. Im PHP-Teil habe ich ein Mock-Ergebnis-Array erstellt Bei inneren Arrays für das Beispiel enthält der Schlüssel "other_data" die Daten, die Sie an das item-Element binden möchten. In der foreach-Schleife fügen wir dann das Attribut "data-other" hinzu, das die anderen Daten als strifify-Objekt enthält. Ich habe die "substr" -Funktion für das Beispiel festgelegt, Sie können es später entbinden. die neue div mit dem „Anzeige-Daten“ id ist nur zum Drucken der Daten der einzelnen Elemente auf Click-Ereignisse:

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

im JS Teil, sind wir eine for-Schleife auf allen Menüstücken Elemente laufen und fügen click event hinzu, wenn wir auf ein Element klicken, erhalten wir die spezifischen Daten, dann parsen wir es, damit wir es als Objekt verwenden können. Im Beispiel drucken wir die spezifischen Daten des Elements als String im div-Element ("display -data "id) bei Klickereignis:

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