在PHP foreach循环中使用jQuery函数

Question

I have a PHP array of elements

Now I would like to create a link or a button for each of the array elements, when clicked, the array value should appear inside a specific div.

here is my 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>

This just doesn't work the way I'd like it to. It displays the separate links for each of the array elements, but when I click on the first one it just displays all the three array elements, instead of just the intended one. The other two links do nothing.

Any help would be appreciated guys, my approach may even be completely the wrong way to do it, so please lead me to the correct way.

Thanks

Answer 1

What about:

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

Then

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