如何显示使用jQuery的for循环中的每个链接的标记？

我有一个ID为'b1'的div for循环。这个div是可点击的，当我点击这个链接时，我想显示与该div相关的标签以显示在该特定的div b1下面。但是作为按我的代码，它只是显示第一div.Below标签是我的代码如何显示使用jQuery的for循环中的每个链接的标记？

<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>

我怎样才能得到各格的内容出现在其下方上点击链接？可能有人帮助我与这个jQuery

来源

2013-07-02 Leah

的标签是 “整” 或 “newdiv”？ – Sora

对于'newdiv'''newdiv'是'整个'内的div，它具有无显示的样式，并且仅在各自的'b1'div被点击时才显示 – Leah

首先，您需要验证您生成的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-02 09:52:30 RoToRa

哇，这工作得很好。并且感谢你解释它我是jquery的新手，只是做了一个快速的代码来查看输出，tats为什么id和class名称是废话，但我明白标准名称有助于更好地理解代码。感谢您的帮助！ – Leah

如何显示使用jQuery的for循环中的每个链接的标记？

回答

相关问题