Javascript 动态HTML ID（PHP、Java和一些SQL）

我试图创建一个网页，该网页生成一系列唯一的DIV id，每个DIV id根据SQL表中的条目显示不同的内容

每个div都有一个“隐藏”和“显示”按钮，当手动为每个div指定一个唯一的名称时，这些按钮可以独立工作

我可以让div自己根据PHP中的类名生成，从而正确显示div

问题在于“隐藏”和“显示”按钮，因为它们是由JavaScript控制的。代码如下：

for ($j = 0 ; $j < $rows ; ++$j)
{
for($i =0; $i < $rows2; $i++)
{   
    if (mysql_num_rows($ans) > 0) //check if widget table is empty
    {   

        $widgetusr[$j] = mysql_result($ans,$j,'wname')or die(mysql_error()); //user's widget
    $widgetstore[$i] = mysql_result($ans2,$i,'wname'); //store widget

    if($widgetusr[$j] == $widgetstore[$i] && $widgetusr[$j] != 'Medieval Calendar') //check if user has already purchased the widget
    {   
        echo "<div class=widget_container".$j%2 .">"; //container divs are named 1 and 0. j mod 2 should return either 1 or 0
        ?>
        <!----Start of weather Widget--->       

        <!---Script for show/hide buttons weather widget--->
           <script>
        var widg = "<?php echo $widgetusr[$j]; ?>";
        var id = "#" + widg;


        $(document).ready(function(){
          $("#hide1").click(function(){
           $(id).hide();
         });
        $("#show1").click(function(){
         $(id).show();
         });
        });

        </script>

        <button id="hide1">Hide</button>
        <button id="show1">Show</button>

        <!---End Script for show/hide buttons weather widget--->  
        <?php
          echo "<div class = 'widget' id='$widgetusr[$j]'>
               </div>
        </div>
        <!----End of Widget---> ";          

    }
}
else
{   
        echo "You have no widgets please visit <a href='store.php'> the store </a> to purchase some. <br/>"; //widget table is empty. Redirect to widget store.
}
}
}
?>

（$j=0；$j<$rows；++$j）的

{
对于（$i=0；$i<$rows2；$i++）
{   
if（mysql_num_rows（$ans）>0）//检查小部件表是否为空
{   
$widgetusr[$j]=mysql_result（$ans，$j，'wname'）或die（mysql_error（））；//用户的小部件
$widgetstore[$i]=mysql_结果（$ans2，$i，'wname'）；//存储小部件
if（$widgetusr[$j]==$widgetstore[$i]&&$widgetusr[$j]！=“中世纪日历”）//检查用户是否已经购买了该小部件
{   
echo“”；//容器div的名称为1和0。j mod 2应返回1或0
?>
var-widg=“”；
变量id=“#”+widg；
$（文档）.ready（函数（）{
$（“#hide1”）。单击（函数（）{
$（id）.hide（）；
});
$（“#显示1”）。单击（函数（）{
$（id.show（）；
});
});
隐藏
显示
您应该使用class而不是id，并且不要将
$（document）.ready（）
放入循环中

HTML:

<div class="widget_container">
    <button class="btn hideBtn">Hide</button>
    <button class="btn showBtn">Show</button>    
    <div class="widget">widget1</div>
</div>
<div class="widget_container">
    <button class="btn hideBtn">Hide</button>
    <button class="btn showBtn">Show</button>    
    <div class="widget">widget2</div>
</div>  

CSS:

下面是一个示例：
您实际上只需要一个按钮

<div class="widget_container">
    <button class="btn ">Hide</button> 
    <div class="widget">widget1</div>
</div>
<div class="widget_container">
    <button class="btn">Hide</button> 
    <div class="widget">widget2</div>
</div>   
<div class="widget_container">
    <button class="btn">Hide</button> 
    <div class="widget">widget3</div>
</div> 


隐藏
widget1
隐藏
widget2
隐藏
寡妇3

并在循环的外部输出以下，确保jQuery已加载：

<script type="text/javascript">
   //Standar jquery doc ready event, fires when the dom is loaded
   $(document).ready(function(){  
       //add an event listener elements with a class of "btn"
       $('.btn').click(function () {  
          //"this" is the element click, so we find siblings of this with a class
          //of "widget" and toggle its visibility
          $(this).siblings('.widget').toggle();
          //Change the text of the button the below is short hand for:
          //if($(this).text() == "Hide"){
          //    $(this).text("Show");
          //}else{
          //    $(this).text("Hide");
          //}
          $(this).text($(this).text() == "Hide" ? "Show" : "Hide"); 
       });
   });
</script>


//standarjquerydocready事件，在加载dom时激发
$（文档）.ready（函数（）{
//添加一个类为“btn”的事件侦听器元素
$（'.btn'）。单击（函数（）{
//“this”是元素click，因此我们发现它与一个类有同级关系
//“widget”的属性，并切换其可见性
$（this.sides（'.widget'）.toggle（）；
//更改按钮的文本以下简称：
//if（$（this.text（）=“Hide”）{
//$（此）.text（“显示”）；
//}否则{
//$（此）.text（“隐藏”）；
//}
$（this）.text（$（this）.text（）==“隐藏”？“显示”：“隐藏”）；
});
});


一些有用的链接：










固定高度小部件的示例：

更新2
也许是一个更好的方法：
你能发布呈现的HTML而不是PHP吗？我认为使用类比使用
id
s容易得多。虽然我同意你的观点，但每个div都需要独立控制。将它们分配给类会使单击一个按钮激活该类的所有div。你可以不要像在“financial widget”中那样在id中使用空格。也许这就是重点…您的演示看起来正是我想要的，但是在应用您的解决方案时，我得到一个错误，说（evt）不是一个函数。它包含在什么包/脚本中？我只使用JQuery。
evt
是
eventObject
发送到处理函数（）。可能是您在复制时出错了？我一个字符一个字符地复制了它，正如我所说的，示例工作正常，但是我复制了您的代码并将其放入循环之外，正如您所说的，我的firebug控制台返回以下内容：TypeError:$（…）。on不是函数$（'.btn'）。on（'click'，function（evt）{什么时候加载JQuery？加载哪个版本？我更新了我的JQuery版本。（现在还是有点新）但是，我仍然对代码有一个问题。在您提供的示例中，单击“隐藏”和“显示”按钮时，它们会交换，在我的示例中，“隐藏”按钮会消失，并且在其位置上不会显示任何其他内容。是否应该为.hideBtn添加CSS？很难说更改小部件容器高度的最佳方法。小部件是固定高度？如果是这样，只需将CSS类应用于
小部件
并指定高度，可能还有边距。我在小部件容器上有一个初始高度，删除它会产生我想要的效果。它不漂亮，但很有效。感谢提供的资源。！
<div class="widget_container">
    <button class="btn ">Hide</button> 
    <div class="widget">widget1</div>
</div>
<div class="widget_container">
    <button class="btn">Hide</button> 
    <div class="widget">widget2</div>
</div>   
<div class="widget_container">
    <button class="btn">Hide</button> 
    <div class="widget">widget3</div>
</div> 

<script type="text/javascript">
   //Standar jquery doc ready event, fires when the dom is loaded
   $(document).ready(function(){  
       //add an event listener elements with a class of "btn"
       $('.btn').click(function () {  
          //"this" is the element click, so we find siblings of this with a class
          //of "widget" and toggle its visibility
          $(this).siblings('.widget').toggle();
          //Change the text of the button the below is short hand for:
          //if($(this).text() == "Hide"){
          //    $(this).text("Show");
          //}else{
          //    $(this).text("Hide");
          //}
          $(this).text($(this).text() == "Hide" ? "Show" : "Hide"); 
       });
   });
</script>