Question

我必须显示客户订购的数据库中的每个产品，但我想在div点击时显示/隐藏它们。 http://prntscr.com/7c5q6t

这是我的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。

Answer 1

找到以下代码，

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

Answer 2

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

使用Javascript：

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

CSS：

.toggle.hide + div {
    display: none;
}

Answer 3

为你的div添加一个onclick：

<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();
    }
};

Answer 4

这是一种简单的切换方式。

<强>的JavaScript

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

修改

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

Jquery为具有唯一ID的div切换

4 个答案: