[英]Hiding and Showing dynamically generated table rows with help of a single button
我在 WordPress 部分中有一个使用动态数据生成的表格,其中有一个自定义要求,其中“默认情况下应该隐藏大于 3 的表格行。以及应该通过一个按钮切换显示更多行或显示更少表格行的功能。但是,但是,我已经用两个不同的功能实现了它。我需要一个按钮来级联这两个功能。
就像表格下方显示“显示更多”的按钮一样,一旦单击,将显示所有动态表格行。 并且同一个按钮在点击后应该显示“少显示”并隐藏回默认状态。
我知道脚本在服务器上非常烦人,任何替代方案都将不胜感激!
<table width="100%" cellspacing="10" cellpadding="10" class="tablec">
<thead>
<tr>
<th><strong>Floor Plan</strong></th>
<th><strong>Dimension</strong></th>
<th><strong>Price</strong></th>
</tr>
</thead>
<tbody>
<?php
function RemoveSpecialChar($str)
{
$res = str_replace( array( '\'', '"',
',' , ';', '<', 'West', 'Floor Plan', '>' , '-' ), ' ', $str);
return $res;
}
foreach( $floor_plans as $plans ) { $i++;
if($plans['fave_plan_title'] == "Master Plan"){
break;
}
?>
<tr id="<?php echo $i;?>" class="<?php echo $i;?>">
<td> <a href="<?php echo esc_url( $plans['fave_plan_image'] ); ?>" data-lightbox="roadtrip">
<img class="borderr" src="<?php echo esc_url( $plans['fave_plan_image'] ); ?>" alt="<?php echo $plans['fave_plan_description']; ?>" width="100" height="100" title="<?php echo $plans['fave_plan_description']; ?>">
</a></td>
<td>
<?php
$str=ltrim(chop($plans['fave_plan_description'],"Floor Plan"), get_the_title());
$str1 = RemoveSpecialChar($str);
echo $str1;
?> <br>
<b><?php echo esc_attr( $plans['fave_plan_size'] ); ?> Sqft</b>
</td>
<td><button class="btn btn-primary">Get Quote</button></td>
</tr>
<?php } ?>
</tbody>
</table> <br>
<div class="wrapperr">
<button class="btn btn-primary" onclick="show()">Show All <i class="fa fa-arrow-down" style="font-size:14px"></i></button>
<button class="btn btn-primary" onclick="hide()">Show Less <i class="fa fa-arrow-up" style="font-size:14px"></i></button>
</div>
</div><!-- block-content-wrap -->
</div><!-- block-wrap -->
</div><!-- property-floor-plans-wrap -->
<?php } ?>
JavaScript:
<script>
document.getElementById('4').style.display = 'none';
document.getElementById('5').style.display = 'none';
document.getElementById('6').style.display = 'none';
document.getElementById('7').style.display = 'none';
document.getElementById('8').style.display = 'none';
document.getElementById('9').style.display = 'none';
document.getElementById('10').style.display = 'none';
document.getElementById('11').style.display = 'none';
document.getElementById('12').style.display = 'none';
document.getElementById('13').style.display = 'none';
document.getElementById('14').style.display = 'none';
document.getElementById('15').style.display = 'none';
document.getElementById('16').style.display = 'none';
document.getElementById('17').style.display = 'none';
document.getElementById('18').style.display = 'none';
document.getElementById('19').style.display = 'none';
document.getElementById('20').style.display = 'none';
function hide() {
document.getElementById('4').style.display = 'none';
document.getElementById('5').style.display = 'none';
document.getElementById('6').style.display = 'none';
document.getElementById('7').style.display = 'none';
document.getElementById('8').style.display = 'none';
document.getElementById('9').style.display = 'none';
document.getElementById('10').style.display = 'none';
document.getElementById('11').style.display = 'none';
document.getElementById('12').style.display = 'none';
document.getElementById('13').style.display = 'none';
document.getElementById('14').style.display = 'none';
document.getElementById('15').style.display = 'none';
document.getElementById('16').style.display = 'none';
document.getElementById('17').style.display = 'none';
document.getElementById('18').style.display = 'none';
document.getElementById('19').style.display = 'none';
document.getElementById('20').style.display = 'none';
}
function show() {
var a = document.getElementById("4");
var b = document.getElementById("5");
var c = document.getElementById("6");
var d = document.getElementById("7");
var e = document.getElementById("8");
var f = document.getElementById("9");
var g = document.getElementById("10");
var h = document.getElementById("11");
var i = document.getElementById("12");
var j = document.getElementById("13");
var k = document.getElementById("14");
var l = document.getElementById("15");
var m = document.getElementById("16");
var n = document.getElementById("17");
var o = document.getElementById("18");
var p = document.getElementById("19");
var q = document.getElementById("20");
a.style.display = "";
b.style.display = "";
c.style.display = "";
d.style.display = "";
e.style.display = "";
f.style.display = "";
g.style.display = "";
h.style.display = "";
i.style.display = "";
j.style.display = "";
k.style.display = "";
l.style.display = "";
m.style.display = "";
n.style.display = "";
o.style.display = "";
p.style.display = "";
q.style.display = "";
}
</script>
在下面提到的链接中可以看到相同的工作示例,查找平面图部分: https : //doorsandshelters.com/property/sowparnika-indraprastha-2/
您只需要处理为什么客户端脚本。 更好的解决方案可能是使用 jquery 大于选择器
html
<button class="btn btn-primary" onclick="toggle(event)">Show More<i class="fa fa-arrow-down" style="font-size:14px"></i></button>
javascript
var shown = false;
function toggle(e){
if(shown){
jQuery("tr:gt(3)").hide()
e.target.innerText('Show more')
}else{
jQuery("tr:gt(3)").show()
e.target.innerText('Show less')
}
}
取自@gaurav arora 的回答,一种更干净和可维护的方法。
无需使用 2 个按钮和不同的onClick
处理程序,只需使用单个按钮并使用 jquery 函数切换行和按钮文本。 有 2 个按钮会有问题。
HTML:
<button class="btn btn-primary toggleFloorPlans">Show more <i class="fa fa-arrow-down" style="font-size:14px"></i></button>
JQuery 应该放在文件的最底部:
<script>
let shown = false;
$(document).ready(function(){
$(".toggleFloorPlans").click(function(){
var thisEl = $(".toggleFloorPlans");
if(shown){
jQuery("tr:gt(3)").hide()
thisEl.text('Show more')
shown = false;
} else {
jQuery("tr:gt(3)").show();
thisEl.text('Show less')
shown = true;
}
});
});
</script>
我用过这个 jquery CDN,用你的替换它,应该很好用。
这应该在上面的jquery函数之上。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
更新:显示向上/向下箭头
<script>
let shown = false;
$(document).ready(function(){
$(".toggleFloorPlans").click(function(){
var thisEl = $(".toggleFloorPlans");
if(shown){
jQuery("tr:gt(3)").hide()
thisEl.text(`Show more`)
thisEl.append('<i class="fa fa-arrow-down" style="font-size:14px"></i>');
shown = false;
} else {
jQuery("tr:gt(3)").show();
thisEl.text('Show less');
thisEl.append('<i class="fa fa-arrow-up" style="font-size:14px"></i>');
shown = true;
}
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.