1

forループ内に「b1」のIDを持つdivがあります。このdivはクリック可能で、このリンクをクリックすると、そのdivに関連するタグを表示して、その特定のdiv b1の下に表示したいと思います.しかし、私のようにコード、最初のdivのタグを表示するだけです.Belowは私のコードです

<head>

<script type="text/javascript">
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>

    $(document).ready(function(){
    $("#b1").click(function(){
      $('#newdiv').slideToggle();  
        $id= $(this).attr('data-target');
        $src =  $('#newdiv'); 
        $idTrg = $('#'+$id);
        $src.html($idTrg.html());

    });
});
        </script>

       <style>
#newdiv{
    width:100px;
    height:100px;
    background-color:orange;
}
/*#newdiv:hover{
    text-decoration:underline;
}*/
</style> 
    </head>
<body>
   <?php for($i=1;$i<9; $i++): ?>
           <div id="whole">
<div id="b1" data-target="<?php  echo $i; ?>">Content<?php  echo $i; ?></div>
<div id="newdiv"  style="display:none" ></div>
</div>
<?php endfor; ?>

   <?php for($j=1;$j<9; $j++): ?>
<div id="<?php echo $j ;?>" style="display:none">
    Main contents<?php echo $j; ?>
    <div id="another">Inside Another one<?php echo $j; ?></div>
</div>
    <?php endfor; ?>
</body>

リンクをクリックすると、各 div コンテンツがその下に表示されるようにするにはどうすればよいですか?誰かがこのjqueryで私を助けてくれますか?

4

1 に答える 1

1

まず、生成された HTML ( http://validator.w3.org/ )を検証する必要があります。script要素を別の要素内に持つことはできません。

ID は HTML ドキュメント内で一意である必要があり、jQuery には「修正」が組み込まれているため、ID を選択すると常に 1 つの要素のみが返されます。ループ内にあることdivで、結果の HTML コードに複数回出力されます (ブラウザーで生成されたソースを見てください)。

ID をクラスに置き換える必要があります。

さらに$('#newdiv')（または$('.newdiv')クラスを使用している場合）、クリックされた要素の横にある特定の要素ではなく、そのID /クラスを持つ任意の/すべての要素を選択します。.next()代わりにそれを見つけるために使用できます。

最後に、一般的なコード スタイルのアドバイス:

  • より適切な ID/クラス名を使用してください。b1何の意味もありません。そして、「ソース」と「ターゲット」の意味を入れ替えました。
  • すべての変数を宣言しますvar。それ以外の場合、それらはグローバル変数になります。
  • すべての変数にプレフィックスを付けないでください$。jQuery オブジェクトを保持する変数に接頭辞を使用する人もい$ますが、これは問題ありません (ただし推奨されません) が、他の変数に対しては意味をなさないことは確かです。
  • コードをよりきれいにインデントして、読みやすくします。

 

<head>
  <script src="http://code.jquery.com/jquery-1.10.1.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $(".b1").click(function(){
        var $target = $(this).next();
        $target.slideToggle();  
        var id = $(this).attr('data-target');
        $src = $('#'+id);
        $target.html($src.html());
      });
    });
  </script>

  <style>
    .newdiv{
      width:100px;
      height:100px;
      background-color:orange;
    }
  </style> 
</head>
<body>
  <?php for($i=1;$i<9; $i++): ?>
    <div class="whole">
      <div class="b1" data-target="<?php  echo $i; ?>">Content<?php  echo $i; ?></div>
      <div class="newdiv"  style="display:none" ></div>
    </div>
  <?php endfor; ?>

  <?php for($j=1;$j<9; $j++): ?>
    <div id="<?php echo $j ;?>" style="display:none">
      Main contents<?php echo $j; ?>
      <div class="another">Inside Another one<?php echo $j; ?></div>
    </div>
  <?php endfor; ?>
</body>
于 2013-07-02T09:52:30.957 に答える