使用 PHP 的动态 CSS ID答案

【问题标题】：Dynamic CSS ID with PHP使用 PHP 的动态 CSS ID
【发布时间】：2014-01-16 23:05:24
【问题描述】：

这里是新手。尝试使用 PHP 增加 CSS ID 选择器。按照我的代码

<?php
$thumbnails = get_post_meta($post->ID, "plans", false);
if ($thumbnails[0] != '') :?>
<div id="images-box">
<?php foreach($thumbnails as $thumb) {
    echo '<div class="holder">
        <div id="image-'. $id .'" class="image-lightbox">
            <span class="close"><a href="#">X</a></span>
            <img src="' . $thumb . '" alt="" />
            <a class="expand" href="#image-1"></a>
        </div>';
} ?>
</div>
<?php endif; ?>

我想要的是

<div id="image-1" class="image-lightbox">
<div id="image-2" class="image-lightbox">
<div id="image-3" class="image-lightbox">

我尝试了许多在此处得到解答的选项 (http://codepad.org/OHuTxQPI)，但无法正确解决。

【问题讨论】：

标签： php css dynamic selector

【解决方案1】：

只需在您的代码中添加$id=1; 和$id++;。

<?php 
$id = 1;
foreach($thumbnails as $thumb) {
echo '<div class="holder">
    <div id="image-'. $id .'" class="image-lightbox">
        <span class="close"><a href="#">X</a></span>
        <img src="' . $thumb . '" alt="" />
        <a class="expand" href="#image-1"></a>
    </div>';
$id++;
} ?>

编辑：如果你想从id='image-1'开始，应该使用$id=1;。

【讨论】：

【解决方案2】：

您使用$id 作为计数器，但实际上并没有定义或增加任何值。

<?php
$thumbnails = get_post_meta($post->ID, "plans", false);
if ($thumbnails[0] != '') :?>
<div id="images-box">
<?php 
$id = 0; 
foreach($thumbnails as $thumb) {
    echo '<div class="holder">
        <div id="image-'. $id .'" class="image-lightbox">
            <span class="close"><a href="#">X</a></span>
            <img src="' . $thumb . '" alt="" />
            <a class="expand" href="#image-1"></a>
        </div>';
$id++;
} ?>
</div>
<?php endif; ?>

【讨论】：

输出是

我怎样才能得到这个 1,2,3
考虑到您设置 $id = 0，这很奇怪。那行代码是否与我的代码在同一位置。

【解决方案3】：

与其他人不同，我使用直接的 for() 循环而不是 foreach() 来提供更多控制（好吧，这真的只是因为我是强迫症并且喜欢使用 $i）。

Here's the demo

PHP：

<?php
  $thumbnails = array(0 => array('thumb' => 'image.jpg'), 1 => array('thumb' => 'image2.jpg'));
// $thumbnails = get_post_meta($post->ID, "plans", false);
  if (isset($thumbnails)): ?>
<div id="images-box">
<?php 
  $i = 0;
  $thumbs = count($thumbnails);
  for($i;$i < $thumbs;$i++) { ?>

<div class="holder">
  <div id="image-<?php print $i; ?>" class="image-lightbox">
    <span class="close"><a href="#">X</a></span>
    <img src="<?php print $thumbnails[$i]['thumb']; ?>" alt="" />
    <a class="expand" href="#image-<?php print $i; ?>"></a>
  </div>
<?php }; ?>
</div>
<?php endif; ?>

HTML 输出：

<div id="images-box">

<div class="holder">
  <div id="image-0" class="image-lightbox">
    <span class="close"><a href="#">X</a></span>
    <img src="image.jpg" alt="" />
    <a class="expand" href="#image-0"></a>
  </div>

<div class="holder">
  <div id="image-1" class="image-lightbox">
    <span class="close"><a href="#">X</a></span>
    <img src="image2.jpg" alt="" />
    <a class="expand" href="#image-1"></a>
  </div>
</div>

【讨论】：

【解决方案4】：

按照 John 的说明使用 $id 的计数器或使用 $id 作为 foreach 循环的索引，如下所示。

<?php
$thumbnails = get_post_meta($post->ID, "plans", false);
if ($thumbnails[0] != '') :?>
<div id="images-box">
<?php foreach($thumbnails as $id=> $thumb) {
    echo '<div class="holder">
        <div id="image-'. $id .'" class="image-lightbox">
            <span class="close"><a href="#">X</a></span>
            <img src="' . $thumb . '" alt="" />
            <a class="expand" href="#image-1"></a>
        </div>';
} ?>
</div>
<?php endif; ?>

【讨论】：