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

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

foreach 循環內是否可以有一個模式按鈕?

foreach 循環內是否可以有一個模式按鈕?

慕桂英4014372 2024-01-22 15:00:44
我在 foreach 循環內有一個模式按鈕,其中包含數據庫中的行,但我只能按第一個按鈕,因為它對于每個循環具有相同的值。我一直在嘗試使用不斷增加的 ID 值$i=0, $i++,但我無法讓它工作。foreach($pdo->query("SELECT * FROM operation, OPuppgift where skift='natt' and klar='0' and operation.NR=OPuppgift.NR") as $row){  $i++;  echo "<tr>";  echo "<td>".$row['NR']."</td>";  echo "<td>".$row['kort_Uppgift']."  </br>    <button id=".$i." class='myBtn'>?</button>    <div id=".$i." class='modal'>      <div class='modal-content'>        <span class='close'>&times;</span>        <p>".$row['uppgift']."</p>          <script type='text/javascript' src='modalJ.js'></script>      </div>    </div>  </td>";var modal = document.getElementById("1");var btn = document.getElementById("1");var span = document.getElementsByClassName('close')[0];btn.onclick = function () {    modal.style.display = 'block';};span.onclick = function () {    modal.style.display = 'none';};window.onclick = function (event) {    if (event.target === modal) {        modal.style.display = 'none';    }};
查看完整描述

1 回答

?
慕碼人8056858

TA貢獻1803條經驗 獲得超6個贊

不要對多個對象使用相同的 ID。您的 div 和按鈕具有相同的 ID,并且也沒有被引用。


改變這個:


</br>

    <button id=".$i." class='myBtn'>?</button>

    <div id=".$i." class='modal'>

對此或類似的東西:


 </br>

    <button id='button".$i."' class='myBtn'>?</button>

    <div id='div".$i."' class='modal'>

請注意,我在 ID 號前面添加了一個描述符,以區分按鈕和 div,然后使用相同的遞增變量來確保每一對在描述符后獲得相同的編號(例如:div1 與 button1 一起使用,等等)。


您也沒有將 ID 括在引號中。我在上面的示例修訂版中將它們用單引號引起來。更改將生成如下 HTML 輸出。


 </br>

    <button id='button1' class='myBtn'>?</button>

    <div id='div1' class='modal'>

...

 </br>

    <button id='button2' class='myBtn'>?</button>

    <div id='div2' class='modal'>

在您的 Javascript 代碼中(感謝 @kerbholz),更改 ID 以匹配。我會以編程方式執行此操作(您在代碼中使用靜態值),但是最終結果應該像這樣預先考慮您的指示符(但通過使用正確數字的代碼)。


var modal = document.getElementById("div1");

var btn = document.getElementById("button1");

不過,您沒有將 id 號傳遞給腳本。您可以使用“this”或傳遞值或其他方法,因此您的按鈕控制正確的兩個元素。


查看完整回答
反對 回復 2024-01-22
  • 1 回答
  • 0 關注
  • 142 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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