显示列表中的前5项，隐藏/切换其他项的显示(PHP） - Show first 5 items in list, hide/toggle display of others (PHP)

Show first 5 items in list, hide/toggle display of others (PHP)

本文关键字：显示其他 PHP 隐藏列表 5项 | 更新日期: 2023-09-27

我想显示列表中的前5个名称，并将任何其他名称的显示切换为单个块。

我目前已经将名称列表作为数组对象，但如果解决方案更简单的话，我很乐意将其更改为数组。

到目前为止，我已经完成了*中的*，因为我不知道如何创建名称的隐藏div：

PHP

  $names_count=0;
  echo '<div id='nameList' class='toggler'>';
  foreach($names as $name){
     echo '<a id='name'.$name->acct_id.'>'.$name->full_name.'</a>';
     if($names_count<=4){
       echo '</div><!--toggler div-->';
     } 
     else
        <div class='namesList' style='display:none'>
         //put additional names in hidden div?
        </div>          
     }
     $names_count++;
  } //endforeach

JS：更新很抱歉造成混淆。这并不是一个真正的javascript问题，所以我删除了那个标签，但为了PHP 的完整性，我将包含以下jQuery代码片段

$('.toggler').click(function(){
   var id=this.id;
   $('#'+id).toggle();
});

PHP

$names_count = 0;
echo '<div id="nameList" class="toggler">';
foreach($names as $name) {
    echo '<a id="name' . $name->acct_id . '">' . $name->full_name . '</a>';
    if ($names_count == 4) {
        echo '</div><div class="hidden">';
    }
    $names_count++;
} 
echo '</div>';

JS-

$('.toggler').click(function(){
   $(this).next().toggle();
});

CSS

.hidden {
    display: none;
}

这里有一个带有两个while循环的示例。

$names = array('Bob', 'Andy', 'Tim', 'Max', 'Roger', 'John', 'Test');
$nameCount = count($names);
$nameIndex = 0;
echo '<div id="nameList" class="toggler">'; 
// Show the first 5 names.
while ($nameIndex < min(5, $nameCount)) {
    $name = $names[$nameIndex++];
    echo '<a id="name' . $name . '">' . $name . '</a>';
}
// Show the remaining names in a hidden div.
if ($nameIndex < $nameCount)
{       
    echo '<div class="hiddenNames" style="display:none">';
    while ($nameIndex < $nameCount) {
        $name = $names[$nameIndex++];
        echo '<a id="name' . $name . '">' . $name . '</a>';
    }
    echo '</div>';     
}
echo "</div>";

该代码产生以下输出。

<div id="nameList" class="toggler">
    <a id="nameBob">Bob</a>
    <a id="nameAndy">Andy</a>
    <a id="nameTim">Tim</a>
    <a id="nameMax">Max</a>
    <a id="nameRoger">Roger</a>
    <div class="hiddenNames" style="display:none">
        <a id="nameJohn">John</a>
        <a id="nameTest">Test</a>
    </div>
</div>

如果你的名字少于5个，这也是安全的；该脚本将生成：

<div id="nameList" class="toggler">
    <a id="nameBob">Bob</a>
    <a id="nameAndy">Andy</a>
    <a id="nameTim">Tim</a>
</div>

对于JS，我可能会做一些类似的事情：

$('.toggler').click(function(){
   $('.hiddenNames').toggle();
});

即使代码更大，我发现它更容易遵循，从长远来看可能更容易维护。（意见）

希望这能有所帮助！

隐藏<div>：

<div style="display: hidden"></div>

然后jQuery应该使用.thoggle（）命令使其可见。