在PHP循环中显示/隐藏
Show/hide in PHP loop
我遇到了一个问题,需要为我的用户显示订单历史记录,函数如下。
订单历史记录-每个订单摘要-(点击详细信息)-详细信息可见。我面临的问题是,当把类放在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>
相关文章:
- 基于其他下拉菜单选择隐藏/显示下拉菜单
- 数据表-隐藏/显示列
- $scope变量,ng隐藏/显示
- 隐藏/显示包含单词的ul li项目.但只能入住李的子女
- JQuery隐藏/显示无法正常工作
- 隐藏/显示下面的分区根据是否选择某个选项进行选择
- 使用类而不是id在JavaScript中隐藏显示
- 我想隐藏/显示我的SVG元素,同时在anguarJS中使用它
- 隐藏/显示图像
- Javascript 中的表 - 隐藏/显示列
- 仅使用Javascript隐藏/显示元素,而不会弄乱DOM
- 隐藏/显示 js 代码不会在 IE8 或更低版本上运行
- Magento:根据所选国家/地区隐藏/显示输入字段
- 货到付款选择隐藏/显示付款方式
- "隐藏/显示”;元素和更改按钮背景图像
- Bootstrap Collapse.js切换菜单的隐藏/显示
- 如何隐藏/显示<面板>使用jquery
- 在php中隐藏/显示切换回声结果
- 如何使用jquery使2个按钮切换css,而只使用1个按钮.不显示隐藏/显示
- JQuery隐藏/显示不起作用