1

我在 for 循环中有一个 id 为“b1”的 div。这个 div 是可点击的，当我点击这个链接时，我想显示与该 div 相关的标签，以显示在该特定 div b1 下方。但根据我的代码，它只显示第一个 div 的标签。下面是我的代码

<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 将始终只返回一个元素。通过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 回答