Question

我试图从“标题”和“内容”中获得结果，一次显示一个，然后在循环中淡入和淡出下一个结果。目前，它一次显示所有结果，淡入淡出然后显示所有结果。关于如何让他们一次展示一个TIA的想法

<html>
    <head>
        <style>
            #table1{/*table aspects and design */
            border:1px solid #FFFFFF;
            background:#FFFFFF;
            display:none;
            width: 60%;
            margin-left: auto;
            margin-right: auto;
        }

        th{/*align table headers*/
            text-align:center;
        }
        td,th{
            border:1px solid #FFFFFF;
            text-align:center;
        }
    </style>
</head>

<table id="table1" cellpadding="5" cellspacing="1" width="50%">
    <? if ($query=$pdo->prepare("SELECT * FROM `Announcements_Current`"))
    {
/* select all information from the table and take it into the page  */
    $query->execute(); 
    while ($result = $query->fetch(PDO::FETCH_ASSOC)){
        $head = $result['headline'];/*puts result of headline from table into variable*/
        $content = $result['content'];
        /*puts result of content from  table into variable*/
        echo /* echo the table to display announcements*/'
        <tr>
            <th>
                <h1>
                    '.$head.'
                </h1>
            </th>
        </tr>
        <tr>
            <td>
                <font size="4">
                    '.$content.'
                </font>
            </td>
        </tr>';

     }
}
?>
</table> <!--end of table-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
/* define script for jquery*/
for (var i = 0; i < 500; i++) {/* for loop to fade in and out the announcements*/

$(document).ready(function() {/*function to fade table in and out*/
$('#table1').fadeIn(2000);
$('#table1').delay(5000);
$('#table1').fadeOut(2000);
}  
)};
</script>

Answer 1

你这是错误的做法。

这不是一个完整的解决方案。我会尽量让你理解这样做背后的逻辑。

遍历结果，但不是立即回显它们，将它们保存在数组中：

<?php
$head[] = $result['headline'];
$content[] = $result['content'];
?>

循环后，只回显第一个结果。在您<h1>和<td>时添加一些ID。你以后会需要它们。

然后将数组传递给JavaScript：

<script type="text/javascript">
    var head = '<?= json_encode($head); ?>';
    var content = '<?= json_encode($content); ?>';
</script>

现在您已经在JS中使用了数组，您必须遍历它们并为每个值更改<h1>和<td>的内容：

for (var i = 0, len = head.length; i < len; i++)
{
    document.getElementById("H1_element_ID").innerHTML = head[i];
    document.getElementById("TD_element_ID").innerHTML = content[i];
}

您可以在此循环中抛出fadeIn()，delay()和fadeOut()，以达到理想的效果！

最后，删除你的for并将其放在$(document).ready()内。

迭代我的sql结果并在循环中显示

1 个答案: