Question

while循环有效，我可以在其中将每个标题显示为一个按钮，单击时每个按钮都有一个模式，但是在每个模式内部，我无法显示标题和注释吗？为什么？

我曾经在ups循环执行中加入了上下的内容，但每个模态只得到第一个标题和注释。

如果有人对我的代码有疑问，请留下评论，请提供我的代码：)

<html>
<head>

<script src="jquery-1.10.2.min.js"></script>
<style>
body
{
    margin:0;
}
.submitted{
margin:0px;
}
.modal
{
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    display:none;
}
.modal_close
{
    width:100%;
    height:100%;
    background:rgba(0,0,0,.8);
    position:fixed;
    top:0;
}
.close
{
    cursor:pointer;
}
.padding{
padding:20px 60px 60px 60px;
}
.note{
text-align:center;
}
#note{
font-family: Javanese text;
}
.call_modal{
 font-family: myFirstFont;
}
.modal_main
{
    width:50%;
    height:400px;
    background:#fff;
    z-index:4;
    position:fixed;
    top:16%;
    border-radius:4px;
    left:24%;
    display:none;
 -webkit-animation-duration: .5s;
    -webkit-animation-delay: .0s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
        -webkit-backface-visibility: visible!important;
    -webkit-animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0)}}
::-webkit-input-placeholder{
  font-size: 13.4px;
}
.error{
text-align:center;
padding: 170px; 50px; 50px 50px;
}
button
{
padding:20px;
border-radius:5px;
background:#808080;
border:none;
font-size:18px;
color:#fff;
margin:8%;
}
</style>
<script>
$(document).ready(function(){
  $(".call_modal").click(function(){
    $(".modal").fadeIn();
    $(".modal_main").show();
      });
});
$(document).ready(function(){
  $(".close").click(function(){
    $(".modal").fadeOut();
    $(".modal_main").fadeOut();
      });
});
$(document).ready(function(){
  $(".submitted").click(function(){
    $(".modal").fadeOut();
    $(".modal_main").fadeOut();
      });
});
</script>
</head>
<body>
<?php $con=mysqli_connect("localhost","root","","task");?>
<?php $results = mysqli_query($con, "SELECT * FROM note"); ?>
<?php while ($row = mysqli_fetch_array($results)) { ?>

<?php
 echo '&nbsp; &nbsp; &nbsp; &nbsp;';
    echo '<button class="call_modal" style="cursor:pointer;">'. $row['title'] . '</button>';
?>
<?php
}?>

<?php $results = mysqli_query($con, "SELECT * FROM note"); ?>
<?php while ($row = mysqli_fetch_array($results)) { ?>
<div class="modal">
<div class="modal_close close"></div>
<div class="modal_main">
<div class="note"> <?php

$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";


if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["comment"])) {
    $comment = "";
  } else {
    $comment = test_input($_POST["comment"]);
  }
}

function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
?>


<?php
   echo '<br><br>';

       echo '<div class="padding">'.$row['title'].'';
        echo '<br><br><br><br>';
    echo ''.$row['note'].'</div>';
?>



<img src="i783wQYjrKQ.png" class="close" style="line-height: 12px;
     margin-top: 1px;
     margin-right: 2px;
     position:absolute;
     top:0;
     right:0;">
</div>
</div>
<?php
}?>
</body>
</html>

Answer 1

似乎每个模态都需要某种唯一标识符。这更多的是JavaScript问题，而不是php问题。我要在每个注释中添加一个数据ID，因为这似乎是唯一需要唯一的东西。显示模式，并显示相关的一个音符。

尝试做更多类似的事情。

echo '<button class="call_modal" data-id="{$row['id']}" style="cursor:pointer;">'. $row['title'] . '</button>';

还有这个

<div class="modal">
<div class="modal_close close"></div>
<div class="modal_main">
<?php $results = mysqli_query($con, "SELECT * FROM note"); ?>
<?php while ($row = mysqli_fetch_array($results)) { ?>
<div class="note" data-id="<?= $row['id'] ?>">

还有这个

$(document).ready(function(){
  $(".call_modal").click(function(){
    $(".modal").fadeIn();
    $(".modal .note[data-id='"+$(this).data('id')+"']").show();
  });
});

为什么我无法在每个模态中获得标题和注释？

1 个答案: