在PHP循环中显示/隐藏 - Show/hide in PHP loop

Show/hide in PHP loop

本文关键字：隐藏显示 PHP 循环 | 更新日期: 2023-09-27

我遇到了一个问题，需要为我的用户显示订单历史记录，函数如下。

订单历史记录-每个订单摘要-（点击详细信息）-详细信息可见。我面临的问题是，当把类放在JavaScript上时，我看到所有细节选项卡都会在一次点击中显示出来，因为我需要它是唯一一个在用户点击细节时可以看到的选项卡，这应该是针对该订单本身，而不是针对他的其他订单。

下面是我的PHP 代码

<div class="detail-btn" id="detail_button">
  <a href="javascript:void(0)">DETAILS</a>
</div>
<div class="detailShow" id="detailbtnshow"></div>
<div class="detail-btn" id="detail_button">
  <a href="javascript:void(0)">DETAILS</a>
</div>
<div class="detailShow" id="detailbtnshow"></div>
<div class="detail-btn" id="detail_button">
  <a href="javascript:void(0)">DETAILS</a>
</div>
<div class="detailShow" id="detailbtnshow"></div>
<div class="detail-btn" id="detail_button">
  <a href="javascript:void(0)">DETAILS</a>
</div>
<div class="detailShow" id="detailbtnshow"></div>

我使用过的JavaScript如下。

 $("#detail_button").click(function(){
    $("#detailbtnshow").slideToggle();
 });

我已经尝试过使用类，唯一的问题是我的所有细节div都可以一键打开，但我希望他们在相关细节按钮

上打开一个用户点击

试试这个，你只需要显示点击的div的下一个div：

$(".detail-btn").click(function(){
    $(this).next(".detailShow").slideToggle();
});

这里有一种PHP方法，但这样做很难看：

<script>
<?php
// Assuming Items will be the array which will contain orders 
$count = count($items);
for($i=0;$i<$count;$i++)
{ ?>
$(".detail-btn_<?php echo $i; ?>").click(function(){
$(".detailShow_<?php echo $i; ?>").slideToggle();
});
<?php } ?>
</script>
<?php
for($i=0;$i<$count;$i++)
{ ?>
<div class="detail-btn_<?php echo $i; ?>" id="detail_button">
<a href="javascript:void(0)">DETAILS</a></div>
<div class="detailShow_<?php echo $i; ?>" id="detailbtnshow"> 
</div>
});
<?php } ?>

试试这个代码段。。。

$(".detail-btn").click(function(){
     $('.detailShow').hide();
     $(this).next(".detailShow").slideToggle();
});

.detailShow{ display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="detail-btn" id="detail_button" >
      <a href="javascript:void(0)">DETAILS</a>
	 </div>
    <div class="detailShow" id="detailbtnshow"> 
	aa
    </div>
    <div class="detail-btn" id="detail_button" >
      <a href="javascript:void(0)">DETAILS</a>
	 </div>
    <div class="detailShow" id="detailbtnshow"> 
	bb
    </div>
	
    <div class="detail-btn" id="detail_button" >
      <a href="javascript:void(0)">DETAILS</a>
	 </div>
    <div class="detailShow" id="detailbtnshow"> 
	cc
    </div>
	
    <div class="detail-btn" id="detail_button" >
      <a href="javascript:void(0)">DETAILS</a>
	 </div>
    <div class="detailShow" id="detailbtnshow"> 
	dd
    </div>