我需要创建一个PHP循环来输出以下HTML代码。所以基本上，第一个div有'item active'后跟4个div，每个后续div只有一个'item'类，后跟4个div。
<div class="item active">
<div data-target="#carousel" data-slide-to="0" class="thumb"><img src="http://placehold.it/100/e8117f/fff&text=Product+Main"></div>
<div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://placehold.it/100/00ffff/000&text=Product+Image+2"></div>
<div data-target="#carousel" data-slide-to="2" class="thumb"><img src="http://placehold.it/100/ff00ff/fff&text=Product+Image+3"></div>
<div data-target="#carousel" data-slide-to="3" class="thumb"><img src="http://placehold.it/100/ffff00/000&text=Product+Image+4"></div>
</div><!-- /item -->
<div class="item">
<div data-target="#carousel" data-slide-to="4" class="thumb"><img src="http://placehold.it/100/612b65/fff&text=Product+Image+5"></div>
<div data-target="#carousel" data-slide-to="5" class="thumb"><img src="http://placehold.it/100/00ffcc/000&text=Product+Image+6"></div>
<div data-target="#carousel" data-slide-to="6" class="thumb"><img src="http://placehold.it/100/db371b/fff&text=Product+Image+7"></div>
<div data-target="#carousel" data-slide-to="7" class="thumb"><img src="http://placehold.it/100/feb8aa/000&text=Product+Image+8"></div>
</div><!-- /item -->
<div class="item">
<div data-target="#carousel" data-slide-to="8" class="thumb"><img src="http://placehold.it/100/612b65/fff&text=Product+Image+5"></div>
<div data-target="#carousel" data-slide-to="9" class="thumb"><img src="http://placehold.it/100/00ffcc/000&text=Product+Image+6"></div>
<div data-target="#carousel" data-slide-to="10" class="thumb"><img src="http://placehold.it/100/db371b/fff&text=Product+Image+7"></div>
<div data-target="#carousel" data-slide-to="11" class="thumb"><img src="http://placehold.it/100/feb8aa/000&text=Product+Image+8"></div>
</div><!-- /item -->
到目前为止，我有： -
<?php
if( have_rows('image_gallery', $street) ): $thumb = 0;
while ( have_rows('image_gallery', $street) ) : the_row(); $thumb++; ?>
<?php if ($thumb % 4 != 0) { ?>
<div class="item active">
<div data-target="#carousel" data-slide-to="<?php echo $thumb; ?>" class="thumb"><img src="<?php the_sub_field('image'); ?>"></div>
</div>
<?php } else { ?>
<div class="item">
<div data-target="#carousel" data-slide-to="<?php echo $thumb; ?>" class="thumb"><img src="<?php the_sub_field('image'); ?>"></div>
</div>
<?php } ?>
<?php endwhile;
else :
endif; ?>
哪些不符合我的要求，所以任何帮助都会非常感激。
EDIT，
目前上述代码产生： -
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://radleigh.dev/wp-content/uploads/2015/11/berryheath-street.jpg"></div>
</div>
<div class="item active">
<div data-target="#carousel" data-slide-to="2" class="thumb"><img src="http://radleigh.dev/wp-content/uploads/2015/11/bradwell-street.jpg"></div>
</div>
<div class="item active">
<div data-target="#carousel" data-slide-to="3" class="thumb"><img src="http://radleigh.dev/wp-content/uploads/2015/11/castlegreen-street.jpg"></div>
</div>
<div class="item">
<div data-target="#carousel" data-slide-to="4" class="thumb"><img src="http://radleigh.dev/wp-content/uploads/2015/11/langley-steet-2.jpg"></div>
</div>
<div class="item active">
<div data-target="#carousel" data-slide-to="5" class="thumb"><img src="http://radleigh.dev/wp-content/uploads/2015/11/langley-steet.jpg"></div>
</div>
<div class="item active">
<div data-target="#carousel" data-slide-to="6" class="thumb"><img src="http://radleigh.dev/wp-content/uploads/2015/11/queensbury-street.jpg"></div>
</div>
<div class="item active">
<div data-target="#carousel" data-slide-to="7" class="thumb"><img src="http://radleigh.dev/wp-content/uploads/2015/11/radleigh-street.jpg"></div>
</div>
<div class="item">
<div data-target="#carousel" data-slide-to="8" class="thumb"><img src="http://radleigh.dev/wp-content/uploads/2015/11/saxonfields-street.jpg"></div>
</div>
<div class="item active">
<div data-target="#carousel" data-slide-to="9" class="thumb"><img src="http://radleigh.dev/wp-content/uploads/2015/11/weaverspoint-street.jpg"></div>
</div>
<div class="item active">
<div data-target="#carousel" data-slide-to="10" class="thumb"><img src="http://radleigh.dev/wp-content/uploads/2015/11/wessington-street.jpg"></div>
</div>
</div>
答案 0 :(得分：1)
您可以这样做：
<?php
$counter = 0;
if(have_rows('image_gallery', $street)){
while(have_rows('image_gallery', $street)){
if($counter == 0){
?>
<div class="item active">
<?php
}elseif($counter % 4 == 0){
?>
</div>
<div class="item">
<?php
}
?>
<div data-target="#carousel" data-slide-to="<?php echo $counter; ?>" class="thumb"><img src="<?php the_sub_field('image'); ?>"></div>
<?php
++$counter;
}
?>
</div>
<?php
}
?>
答案 1 :(得分：1)
首先，我建议您开始使用某种模板引擎，例如Smarty。像你一样将HTML与PHP混合是非常糟糕的做法。代码几乎不可读，并且非常不舒服。如果你经过一段时间后必须在这些代码中修改或改变某些东西，你会发现自己受了很多苦。
最简单的做法 - 将所有数据放入数组中并使用＆＃34; \ n＆＃34;将其内插（）在输出之前。调试这样的结构也更容易，你将有清晰的PHP没有HTML mixins。
此代码
$products = array(
array(
0 => "http://placehold.it/100/e8117f/fff&text=Product+Main",
1 => "http://placehold.it/100/00ffff/000&text=Product+Image+2",
2 => "http://placehold.it/100/ff00ff/fff&text=Product+Image+3",
3 => "http://placehold.it/100/ffff00/000&text=Product+Image+4",
),
array(
4 => "http://placehold.it/100/612b65/fff&text=Product+Image+5",
5 => "http://placehold.it/100/00ffcc/000&text=Product+Image+6",
6 => "http://placehold.it/100/db371b/fff&text=Product+Image+7",
7 => "http://placehold.it/100/feb8aa/000&text=Product+Image+8",
),
array(
8 => "http://placehold.it/100/612b65/fff&text=Product+Image+5",
9 => "http://placehold.it/100/00ffcc/000&text=Product+Image+6",
10 => "http://placehold.it/100/db371b/fff&text=Product+Image+7",
11 => "http://placehold.it/100/feb8aa/000&text=Product+Image+8",
),
);
$tpl = ' <div data-target="#carousel" data-slide-to="__ID__" class="thumb"><img src="__SRC__"></div>';
$ret = array();
foreach($products as $pk=>$p) {
$ret[] = '<div class="item '.($pk==0?'active':'').'">';
foreach($p as $id=>$src) {
$ret[] = str_replace(array('__ID__','__SRC__'), array($id, $src), $tpl);
}
$ret[] = '</div><!-- /item -->';
}
$html = implode("\n",$ret);
print $html;
产生此输出
<div class="item active">
<div data-target="#carousel" data-slide-to="0" class="thumb"><img src="http://placehold.it/100/e8117f/fff&text=Product+Main"></div>
<div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://placehold.it/100/00ffff/000&text=Product+Image+2"></div>
<div data-target="#carousel" data-slide-to="2" class="thumb"><img src="http://placehold.it/100/ff00ff/fff&text=Product+Image+3"></div>
<div data-target="#carousel" data-slide-to="3" class="thumb"><img src="http://placehold.it/100/ffff00/000&text=Product+Image+4"></div>
</div><!-- /item -->
<div class="item ">
<div data-target="#carousel" data-slide-to="4" class="thumb"><img src="http://placehold.it/100/612b65/fff&text=Product+Image+5"></div>
<div data-target="#carousel" data-slide-to="5" class="thumb"><img src="http://placehold.it/100/00ffcc/000&text=Product+Image+6"></div>
<div data-target="#carousel" data-slide-to="6" class="thumb"><img src="http://placehold.it/100/db371b/fff&text=Product+Image+7"></div>
<div data-target="#carousel" data-slide-to="7" class="thumb"><img src="http://placehold.it/100/feb8aa/000&text=Product+Image+8"></div>
</div><!-- /item -->
<div class="item ">
<div data-target="#carousel" data-slide-to="8" class="thumb"><img src="http://placehold.it/100/612b65/fff&text=Product+Image+5"></div>
<div data-target="#carousel" data-slide-to="9" class="thumb"><img src="http://placehold.it/100/00ffcc/000&text=Product+Image+6"></div>
<div data-target="#carousel" data-slide-to="10" class="thumb"><img src="http://placehold.it/100/db371b/fff&text=Product+Image+7"></div>
<div data-target="#carousel" data-slide-to="11" class="thumb"><img src="http://placehold.it/100/feb8aa/000&text=Product+Image+8"></div>
</div><!-- /item -->
看看有多清晰的代码？所有你需要做的 - 正确填充$ products数组。