0

リストに最初の 5 つの名前を表示し、追加の名前の表示を 1 つのブロックとして切り替えたいと思います。

現在、名前リストを配列オブジェクトとして取得していますが、解決策がより簡単になる場合は、喜んで配列に変更します。

名前の非表示の 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();
});
4

3 に答える 3

1

whileこれは2つのループの例です。

$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();
});

コードが大きくても、追跡しやすく、長期的には保守しやすいと思います。（意見）

お役に立てれば！

于 2013-02-06T17:25:40.353 に答える
0

非表示にするには<div>:

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

次に、jQuery は .toggle() コマンドでそれを表示する必要があります。

于 2013-02-06T16:40:11.813 に答える