0

これはjqueryコードを使用した私のphpです：

<?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回切り替わります。2番目の見出しをクリックすると、1番目と2番目の見出しの内容が切り替わります。これは出力phpのソースコードの関数呼び出しです。

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

なぜこのようになるのか教えてください。私はjqueryを初めて使用するので、インラインで使用します。これを行うのは悪い習慣であり、jqueryを使用する最大の利点がなくなることを知っています。

4

3 に答える 3

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 に答える
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() は、ページが完全にロードされた後、一部のコードを 1 回だけ呼び出すために使用されます。

于 2012-09-13T10:35:23.587 に答える
1

次のことだけで十分であり、おそらく予期しない動作を取り除くことができます.

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

さらに、これは通常、javascript ファイルまたは javascript タグで行います。h2 に ID を置き、それにリスナーを追加します。

また、CSS ファイルを使用して h2 要素に太字を適用することをお勧めします。HTML を周囲にストロングで肥大化させるのではありません。

于 2012-09-13T10:34:17.893 に答える