Javascript 具有唯一id的div的Jquery切换

我必须显示客户订购的数据库中的每个产品，但我希望在div单击时显示/隐藏它们。

这是我的php代码，显示所有订购的产品

<td class="left">
 <?php 
   foreach ($order['OrderedProducts'] as $OrderedProduct) {
    echo "<div class='toggle' id=$OrderedProduct[order_product_id]>Show/hide</div>"."<br>";
    echo "Product id:". $OrderedProduct[order_product_id]."<br>".$OrderedProduct[name]."<br>";
} ?>
</td>

---

请帮助我使用jquery通过唯一的订购产品id切换div。

您可以将产品信息包装到div中，并使用jquery方法和一些CSS隐藏/显示此div

Javascript:

$('.toggle').click(function() {
    $(this).toggleClass('hide');
});

CSS:

找到下面的代码

$(document).ready(function(){
   $(div.toggle).click(function(){
      $(this).next().toggle('hide');
   });
});

<td class="left">
   <?php 
      foreach ($order['OrderedProducts'] as $OrderedProduct) {
      echo "<div class='toggle' id=$OrderedProduct[order_product_id]>Show/hide</div>"."<br>";
      echo "<div>Product id:". $OrderedProduct[order_product_id]."<br>".$OrderedProduct[name]."</div><br>";
      }
   ?>
</td>

---

将onclick添加到您的div：

<td class="left">
 <?php 
   foreach ($order['OrderedProducts'] as $OrderedProduct) {
    echo "<div onclick='showHide(this)' class='toggle' id=$OrderedProduct[order_product_id]>Show/hide</div>"."<br>";
    echo "Product id:". $OrderedProduct[order_product_id]."<br>".$OrderedProduct[name]."<br>";
} ?>
</td>

---

这是切换的简单方法

JavaScript

编辑

---

请向我们展示你生成的HTML代码。如果你使用的是jQuery用户界面，我建议你看看jQuery也不错，但答案不错@鸣人：谢谢。当然，slidetoggle看起来不错。在使用jQuery时不要使用内联事件处理程序！

<td class="left">
 <?php 
   foreach ($order['OrderedProducts'] as $OrderedProduct) {
    echo "<div onclick='showHide(this)' class='toggle' id=$OrderedProduct[order_product_id]>Show/hide</div>"."<br>";
    echo "Product id:". $OrderedProduct[order_product_id]."<br>".$OrderedProduct[name]."<br>";
} ?>
</td>

window.showHide = function(dom) {
    var hidden = $(dom).css('display') != 'none';
    if (hidden)
    {
        $(dom).show();
    }
    else
    {
        $(dom).hide();
    }
};

$(document).on("click", ".toggle", function() { 
      if ($(this).css("display") === "none") {
          $(this).show()
      } else {
          $(this).hide()
      }
})

$(document).on("click", ".toggle", function() { 
      $(this).toggle()
})