0

我有一个 PHP 元素数组

现在我想为每个数组元素创建一个链接或一个按钮，当单击时，数组值应该出现在特定的 div 内。

这是我的代码：

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

这并不像我想要的那样工作。它显示每个数组元素的单独链接，但是当我单击第一个时，它只显示所有三个数组元素，而不仅仅是预期的。其他两个链接什么也不做。

任何帮助将不胜感激，我的方法甚至可能是完全错误的方法，所以请引导我采用正确的方法。

谢谢

4

3 回答 3

5

我不知道您实际上想要实现什么，但是您应该分开关注点[即至少不要让 php 直接与 js 混淆]。

考虑通过属性注入你的值data-*，然后通过 jQuery 检索它们，如下所示：

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

请记住，该id属性应该是唯一的，并且不能在整个 DOM 中重复。

于 2012-12-29T17:22:03.047 回答
1

试试这个

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

问题是您将相同的 id 绑定到 append 函数。我已经改变了你的身份证名称。您可以使用简单地更改它们

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

所以他们无论如何都会得到一个不同的id名称。

于 2012-12-29T17:23:01.813 回答
1

关于什么：

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

然后

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
    var $target = $('#target');
    $(".showElement").click( function(e) {
        e.preventDefault();
        $target.append( $(this).text() );
    });
});
</script>
于 2012-12-29T17:25:36.970 回答