0
我正在创建一个可编辑的日历，与Gmail中的日历非常相似。它是一个div框的网格，并且每个div框都可以被点击并且弹出一个Modal，用户可以在其中编辑/添加数据到该特定条目。PHP For Loop，Modal和MySQL数据
我在我的For循环中遇到了一个与我的Modal有关的轻微问题。我知道用于Div的ID必须是唯一的，但我的变量$i将echo准确地在divid="myBtn' . $i . '"内，但在divid="myModal' . $i . '"内不准确，同样适用于从我的数据库检索数据。准确的“myBtn”div但不是“myModal”div。
此外，我不能收出模态的，一旦我打开它时，我有代码设置为divid="myModal' . $i . '"但是当它只是divid="myModal"它的功能正常，但数据是错误的。
我读了类似于我的问题的其他职位，但似乎无法找到一个工作解决方案。我究竟做错了什么？
<?php
for($i = 0; $i <= 365; $i++){
$d=strtotime($i . " Day");
$day = date("l (m/d)", $d);
$end_month = date("l (m/01)", $d);
$str = strcmp($day, $end_month);
$query_date = date("m/d/Y l", $d);
$sql = "SELECT * FROM XXXXXXXX WHERE date = '$query_date' AND user_id = 1 ORDER BY start_time ASC";
$result = mysqli_query($connection, $sql);
while($row = mysqli_fetch_array($result)){
$entry_id = $row['entry_id'];
$schedule_date = date("l (m/d)", strtotime($row['date']));
$location_name .= "<strong>" . $row['location_name'] . "</strong><br/>(" . $row['start_time'] . " - " . $row['end_time'] . ")<br/><br/>";
}
$test = strcmp($day, $schedule_date);
if($str == 0){
echo '<div id="myBtn' . $i . '" class="menu2" style="width: 100%;">' . date("F", $d) . '</div>';
}
echo '
<!-- The Modal -->
<form action="" name="add-location" method="POST">
<div id="myModal' . $i . '" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p style="color: black;">' . $i . '</p>
<input type="text" name="" class="booking_input" style="width: 100%;" placeholder="' . $i . '"/>
<input type="submit" name="submit" class="button" style="vertical-align: middle; line-height: 15px;" />
</div>
</div>
</form>';
echo '<div id="myBtn' . $i . '" class="menu2" style="text-align: center;"><span style="font-size: 16px; color: #c11414;"><strong><u>' . $day . $i . '</u></strong></span></br/><br/>';
if($test == 0){
echo $location_name . "<br/>";
}
echo "</div>";
?>
<script>
// Get the modal
var modal = document.getElementById('myModal<?php echo $i; ?>');
// Get the button that opens the modal
var btn = document.getElementById("myBtn<?php echo $i; ?>");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<?php
unset($location_name);
unset($address);
unset($start_time);
unset($end_time);
}
?>
不太相关，但这里是style标签去与上面的代码：
<style>
* {
box-sizing: border-box;
}
.header {
border: .5px solid #2f363e;
padding: 15px;
}
.menu2 {
width: 14.28%;
float: left;
padding: 15px;
border: .5px solid #2f363e;
height: 150px;
color: #2f363e;
}
.main {
width: 75%;
float: left;
padding: 15px;
border: .5px solid #2f363e;
}
</style>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
z-index: 1;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
z-index: 1;
}
</style>
这完美的技巧，非常感谢你！我的Javascript知识很穷... @Glufu – Shane