0

这是我的 php 和 jquery 代码：

<?php
require('connection.php');
$query="select title,content from blogs";
echo '<html><head>';
echo '<link rel="stylesheet" href="blog.css" />';
echo '<script src="jquery.js"></script>';
//echo '<script src="blogs.js"></script>';
echo "</head><body>";
$i=0;
if($result=$mysqli->query($query))
{
while($news=$result->fetch_row())
{
echo "<br/><br />"."<strong ><h2 onclick='$(document).ready(function() {
    $(this).click(function(){ $(\"#a".$i."\").toggle(\"slow\");});});'>". $news[0]."</h2></strong>"."<br/><br />";
echo "<div id='a".$i."'>".$news[1]."</div>";
$i++;
}
$result->close();
echo "</body></html>";
}
?>

这有效但不稳定。当我单击第一个标题时，它会像动画一样切换 2 到 3 次。当我单击第二个标题时，第一个和第二个标题内容会切换。这是输出 php 源代码中的函数调用。

<strong ><h2 onclick='$(document).ready(function() {
    $(this).click(function(){ $("#a0").toggle("slow");});});'>HELLO WORLD</h2></strong>

请让我知道为什么会这样？我是 jquery 的新手，所以我内联使用它。我知道这样做是一种不好的做法，并且消除了使用 jquery 的最大优势。

4

3 回答 3

1

只需以下内容就足够了，并且可能会摆脱您的意外行为。

<h2 onclick='$("#a0").toggle("slow")'>hello world</h2>

此外，您通常会在 javascript 文件或 javascript 标记中执行此操作。在 h2 上放置一个 ID，并将侦听器添加到其中。

此外，一个好的做法是将粗体应用到带有 css 文件的 h2 元素，而不是用 strong 来膨胀你的 HTML。

于 2012-09-13T10:34:17.893 回答
1

我最好做这样的事情：

<?php
require('connection.php');
$query="select title,content from blogs";
echo '<html><head>';
echo '<link rel="stylesheet" href="blog.css" />';
echo '<script src="jquery.js"></script>';
echo '<script type="text/javascript">';
echo '    $(document).ready(function() {';
echo '    $("h2").click(function(){ ;$('#a' + $(this).data("id")).toggle("slow");});});';
echo '</script>';
//echo '<script src="blogs.js"></script>';
echo "</head><body>";
$i=0;
if($result=$mysqli->query($query))
{
while($news=$result->fetch_row())
{
echo "<br/><br />"."<strong ><h2 data-id=".$i.">". $news[0]."</h2></strong>"."<br/><br />";
echo "<div id='a".$i."'>".$news[1]."</div>";
$i++;
}
$result->close();
echo "</body></html>";
}
?>

此代码将使用 h2 标记中的 data-id $(this).data("id")（请参阅，它已添加到我的代码中），因此您可以轻松找到所需的 div 并且不需要每个 h2 的 onclick。$(document).ready() 仅用于在页面完全加载后调用某些代码一次。

于 2012-09-13T10:35:23.587 回答
1

这是您清理后的代码：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="blog.css" />
    <script src="jquery.js"></script>
    <!--<script src="blogs.js"></script>-->
    <script>
      $(function(){
        $('h2').click(function(){
          $(this).next().toggle('slow')
        })
      })
    </script>
  </head>
  <body>';
<?php
  require('connection.php');
  $query="select title,content from blogs";
  $i=0;
  if($result=$mysqli->query($query)) {
    while($news=$result->fetch_row()) {
      echo "
    <h2><strong>{$news[0]}<strong></h2>
    <div id='a$i'>{$news[1]}</div>";
      $i++;
    }
    $result->close();
  }
?>
  </body>
</html>
于 2012-09-13T10:37:50.510 回答