En utilisant une fonction jQuery dans une boucle foreach PHP

Question

J'ai un tableau PHP d'éléments

Maintenant, je voudrais créer un lien ou un bouton pour chacun des éléments du tableau, lorsque vous cliquez dessus, la valeur de tableau doit apparaître à l'intérieur un div spécifique

voici mon code:

<?php 
$array = array('apple', 'banana', 'orange'); 
foreach($array as $element) { 
?> 
    <a href="#" onclick="return false;" id="showElement"><?php echo $element; ?></a><br /> 
    <script type="text/javascript" charset="utf-8"> 
    $(document).ready(function(){ 
     $("#showElement").click(function() { 
      $("#hot").append('<?php echo $element; ?><br />'); 
     }); 
    }); 
    </script> 

    <?php 
    } 
    ?> 
    <div id="hot"></div> 

Cela ne fonctionne tout simplement pas la façon dont je voudrais que ce. Il affiche les liens séparés pour chacun des éléments du tableau, mais quand je clique sur le premier, il affiche simplement tous les trois éléments du tableau, au lieu de celui qui est prévu. Les deux autres liens ne font rien.

Toute aide serait appréciée des gars, mon approche peut même être complètement la mauvaise façon de le faire, alors s'il vous plaît me conduire à la bonne façon.

Merci

Answer 1

Qu'en est-:

<?php 
$array = array('apple', 'banana', 'orange'); 
$i=0; 
foreach($array as $element) { 
    echo '<a href="#" class="showElement" id="showElement'.$i.'">'.$element.'</a><br />'; 
    $i++; 
} 
?> 

Puis

<script type="text/javascript" charset="utf-8"> 
$(document).ready(function(){ 
    var $target = $('#target'); 
    $(".showElement").click(function(e) { 
     e.preventDefault(); 
     $target.append($(this).text()); 
    }); 
}); 
</script> 

Answer 2

Je ne sais pas ce que vous voulez atteindre réellement, mais vous devez séparer les préoccupations [à savoir ne laissez pas php jouer avec js directement au moins].

Tenir compte injecter vos valeurs par data-* attributs, et les récupérer plus tard via jQuery comme ceci:

<?php foreach($array as $element): ?> 

    <a href="#" class="yourClass" data-value="<?php echo $element; ?>"><?php echo $element; ?></a> 

<?php endforeach; ?> 

<div id="target"></div> 

<script> 

$(function(){ 

    var $target = $('#target') 

    $('.yourClass').click(function(e){ 

     e.preventDefault() 

     $target.append($(this).data('value')) 

    }) 

}) 

</script> 

alors souvenez-vous que id attribut doit être unique et ne peut pas être répétée tout au long DOM.

Answer 3

Essayez cette

<?php 
$array = array('apple', 'banana', 'orange'); 
foreach($array as $element) { 
?> 
    <a href="#" onclick="return false;" id="showElement-<?php echo $element; ?>"><?php echo $element; ?></a><br /> 
    <script type="text/javascript" charset="utf-8"> 
    $(document).ready(function(){ 
     $("#showElement-<?php echo $element; ?>").click(function() { 
      $("#hot").append('<?php echo $element; ?><br />'); 
     }); 
    }); 
    </script> 

    <?php 
    } 
    ?> 
    <div id="hot"></div> 

Le problème est que vous liant le même id à votre fonction append. J'ai changé vos noms d'identification. Vous pouvez simplement les changer en utilisant

$("#showElement-<?php echo $element; ?>") 

Donc ils obtiennent un nom d'identifiant différent de toute façon.