Question

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

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

到目前为止我所拥有的是* in *完成，因为我不知道如何创建隐藏的名称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问题，所以我删除了该标记，但我包含以下jQuery代码片段以完整性与PHP

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

Answer 1

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;
}

Answer 2

以下是两个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();
});

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

希望这有帮助！

Answer 3

隐藏<div>：

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

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

显示列表中的前5项，隐藏/切换其他项目（PHP）

3 个答案: