Question

我有一个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>

这不符合我的意愿。它显示每个数组元素的单独链接，但是当我单击第一个时，它只显示所有三个数组元素，而不仅仅是预期的数组元素。其他两个链接什么都不做。

任何帮助都会受到赞赏，我的方法甚至可能完全是错误的做法，所以请引导我以正确的方式。

谢谢

Answer 1

我不知道你想要实现什么，但你应该分开关注[即不要让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中重复。

Answer 2

试试这个

<?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绑定到你的追加功能。我已经改变了你的id名字。您只需使用

更改它们即可

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

所以他们得到了一个不同的身份名称。

Answer 3

怎么样：

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

在PHP foreach循环中使用jQuery函数

3 个答案: