借助单个按钮隐藏和显示动态生成的表行

Question

我有一个在 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/

Answer 1

您需要处理它，为什么只需要客户端脚本。 更好的解决方案可能是使用大于选择器的 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')
}
}

Answer 2

取自@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>