亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

JavaScript 代碼在 foreach 中不起作用

JavaScript 代碼在 foreach 中不起作用

PHP
慕森王 2023-07-08 17:37:23
我現在在 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 內運行每個循環*對不起,我的英語不好
查看完整描述

2 回答

?
藍山帝景

TA貢獻1843條經驗 獲得超7個贊

您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 代碼是在瀏覽器上執行的。


查看完整回答
反對 回復 2023-07-08
?
浮云間

TA貢獻1829條經驗 獲得超4個贊

你必須像這樣使用


@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


查看完整回答
反對 回復 2023-07-08
  • 2 回答
  • 0 關注
  • 212 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號