Question

我有一个包含ID和名称年龄的PHP数组，我想在遍历该数组时通过onClick事件在div内回显年龄，该函数在单击循环中的元素名称后应显示一次问题在于，在显示所有这些Div并选择一个Div之后，它仅显示数组中最后一个Div的名称。

我的代码：

foreach($output as $data => $values) {
    $age = $values['age'];
    $name = $values['name']; ?> 

    <article class="<?php echo rand(9999,9999999); ?>">
        <script>
            name= "<?php echo $name ;?>";
        </script>
        <?php echo "<p class= '".rand(9,8889)."'><div class= '".rand(1,888)."' onClick= 'bringName(name)'>".$age."</div></p>"; ?>
        <div class="detailed" id="<?php echo rand(99,9999); ?>">

        </div><!--/ .detailed-->
    </article> <!--/ .article-->

JavaScript ：

<script>    
    function bringName(varx){
        var vacc = varx;
        alert(vacc);
        //e.preventDefault();
    }
</script>

Answer 1

问题是

bringName(name)

这会将名为name的JS变量的值发送到BringName函数中...但是您在输出的name标记中将<script>设置为全局JS变量。麻烦的是，这意味着您打印了一些JS来设置name变量，并且该代码（不是函数的一部分）在页面加载时立即执行。

因此，它立即运行name="[whatever]"的次数是您的PHP $output中的值的次数（因为您创建了name=条语句。显然，这仅意味着最后一个值）最后一个语句中的内容将保留该过程。当您单击任何内容时，它会使用在该时间点发现的name的值，当然这是最后一个。

这是一个逻辑错误，有一个相当简单的解决方案：您的JS根本不需要name值。

只写

onClick= 'bringName(\"".$name."\")'

在PHP中，将值硬编码到您创建的每个onClick中。

Answer 2

您有非常复杂的代码，但是我认为您想要的是单击时发送包含名称的alert()。试试这个：

<script>
    function bringName(varx) {
        var vacc = varx
        alert(vacc);
    }
</script>

<?php
    foreach($output as $data => $values) {
        $age = $values['age'];
        $name = $values['name']; ?>

        <article>
            <p>
                <div 
                    onclick="bringName(this.dataset.name)" 
                    data-name="<?= $name ?>">
                        <?= $age ?>
                </div>
            </p>
            <div class="detailed">

            </div>
        </article>

这利用了data attributes，可以直接替换您问题中的所有代码。

我认为此解决方案比将字符串连接到PHP的函数调用中更干净，并且它使用本机JavaScript。

循环点击功能

2 个答案: