我在 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;?>" language-php"><?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/
uj5u.com熱心網友回復：
您只需要處理為什么客戶端腳本。更好的解決方案可能是使用 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')
}
}
uj5u.com熱心網友回復：
取自@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 style="font-size:14px"></i>');
shown = false;
} else {
jQuery("tr:gt(3)").show();
thisEl.text('Show less');
thisEl.append('<i style="font-size:14px"></i>');
shown = true;
}
});
});
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/346208.html
標籤：javascript php 查询