JavaScript 代码在 foreach 中不起作用

Question

我现在在 laravel 框架中工作（新手，刚刚开始），我有一个 foreach 语句，它将使用卡片样式引导程序显示卡片上的信息，我有一个应该在每张卡片上运行的脚本代码。但是，该脚本仅适用于第一张卡，为什么会发生这种情况？这是我的代码@foreach ($cutomers as $customer)    <div class="column">        <div class="card text-white bg-dark countdown">           <h3 class="card-title" id="b">{{$customer->name</h3>            <p class="card-text">{{$election->last_name}}</p>            <p class="card-text">{{$election->age}}</p>            <p id="demo"></p>            <script>               document.getElementById("demo").innerHTML = "test";            </script>       </div>   </div>@endforeach该部分据说在 foreach 内运行每个循环*对不起，我的英语不好

Answer 1

您demo多次使用该 id。使用这个代替：

@foreach ($cutomers as $key => $customer)

        <div class="column">

            <div class="card text-white bg-dark countdown">

                <h3 class="card-title" id="b">{{$customer->name}}</h3>

                <p class="card-text">{{$election->last_name}}</p>

                <p class="card-text">{{$election->age}}</p>

                <p id="demo_{{ $key }}"></p>

                <script>

                    document.getElementById("demo_{{ $key }}").innerHTML = "test_{{ $key }}";

                </script>

            </div>

        </div>

        @endforeach

请记住，blade 代码是在服务器上执行的（仅在服务器上），而 javascript 代码是在浏览器上执行的。

Answer 2

你必须像这样使用

@foreach ($cutomers as $key => $customer)

    <div class="column">

        <div class="card text-white bg-dark countdown">

            <h3 class="card-title" id="b">{{$customer->name}}</h3>

            <p class="card-text">{{$election->last_name}}</p>

            <p class="card-text">{{$election->age}}</p>

            <p id="demo[{{$key}}]"></p>

            <script>

                document.getElementById("("demo["{{$key}}"]")).innerHTML = "your_value";

            </script>

        </div>

    </div>

@endforeach