为什么 Javascript 函数在 php 循环中只执行一次？答案

【问题标题】：why Javascript function executes only once inside a php loop?为什么 Javascript 函数在 php 循环中只执行一次？
【发布时间】：2016-04-02 22:32:08
【问题描述】：

我有 HideCheckbox() 函数要在 php 循环中执行。

重点是每次加载 div 时隐藏复选框。

但是，复选框只会隐藏在第一个 div 中。

代码如下：

<script type="text/javascript">
function HideCheckbox() {
            document.getElementById("deleteCarCheckbox").style.display = "none";
        }
</script>
<?php
        $username = $_SESSION['username'];

            try{
                $link = mysqli_connect("localhost","root","","db");
                $sql = mysqli_query($link,"a sql query");
                while ($donnees = mysqli_fetch_array($sql)){

?>
<div class="block-car">
<input type="checkbox" id="deleteCarCheckbox" name="deleteCar" style="float:right">
</div>
<script type="text/javascript">
        HideCheckbox();
        </script>



<?php
         }
        catch(Exception $e){die('Erreur : '.$e->getMessage());}
       }
?>

【问题讨论】：

ID 应该是UNIQUE

标签： javascript php loops while-loop

【解决方案1】：

id 字段的值必须是唯一的，下面的代码应该可以解决问题：

<script type="text/javascript">
function HideCheckbox(i) {
    document.getElementById("deleteCarCheckbox" + i).style.display = "none";
}
</script>

<?php
$username = $_SESSION['username'];

try{
    $link = mysqli_connect("localhost","root","","db");
    $sql = mysqli_query($link,"a sql query");
    $i = 1;
    while ($donnees = mysqli_fetch_array($sql)){

        ?>
        <div class="block-car">
        <input type="checkbox" id="deleteCarCheckbox<?php echo $i; ?>" name="deleteCar" style="float:right">
        <script type="text/javascript">
            HideCheckbox(<?php echo $i; ?>);
        </script>



        <?php
        $i++;
    }
    catch(Exception $e){die('Erreur : '.$e->getMessage());}
}
?>

【讨论】：

但是，如果您只想隐藏复选框，请删除您的 javascripts 并执行以下操作：<input type="checkbox" id="deleteCarCheckbox" name="deleteCar" style="float: right; display: none;">
非常感谢你的技巧，以及简单的方法......我不知道它可以使用 CSS 来完成。

【解决方案2】：

这是因为您所有的checkbox 元素都具有相同的id，并且您的javascript 代码只设置了第一次出现的display，并且由于您所有的checkboxes 都具有相同的id，那么它只会隐藏第一个checkbox。相反，让每个checkbox 都有一个唯一的id。

【讨论】：

【解决方案3】：

HideCheckbox() 多次运行，问题是总是隐藏deleteCarCheckbox 要确认循环确实在工作，请尝试将内容记录到控制台上，您将看到它何时被调用。

function HideCheckbox() {
    document.getElementById("deleteCarCheckbox").style.display = "none";
    console.log('HideCheckbox was called');
}

此外，id 属性始终需要是唯一的。见这里：Does ID have to be unique in the whole page?

【讨论】：