单个PHP循环-将每个区域的特定内容输出到两个独立的区域中。(WordPress)

Question

在PHP (wordpress)中，我知道如何创建一个基本的循环-但是我不太确定如何进行单个查询并将其输出到两个独立的区域，如下所示：

<div class="slides_container"> 
                <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-3-2x.jpg" width="366" alt="1144953 3 2x"></a> 
                <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-1-2x.jpg" width="366" alt="1144953 1 2x"></a> 
                <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-2-2x.jpg" width="366" alt="1144953 2 2x"></a>                 
                <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-4-2x.jpg" width="366" alt="1144953 4 2x"></a> 
                <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-5-2x.jpg" width="366" alt="1144953 5 2x"></a> 
                <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-6-2x.jpg" width="366" alt="1144953 6 2x"></a> 
                <a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="img/1144953-p-2x.jpg" width="366" alt="1144953 P 2x"></a> 
            </div> 
            <ul class="pagination"> 
                <li><a href="#"><img src="img/1144953-3-2x.jpg" width="55" alt="1144953 3 2x"></a></li> 
                <li><a href="#"><img src="img/1144953-1-2x.jpg" width="55" alt="1144953 1 2x"></a></li> 
                <li><a href="#"><img src="img/1144953-2-2x.jpg" width="55" alt="1144953 2 2x"></a></li> 
                <li><a href="#"><img src="img/1144953-4-2x.jpg" width="55" alt="1144953 4 2x"></a></li> 
                <li><a href="#"><img src="img/1144953-5-2x.jpg" width="55" alt="1144953 5 2x"></a></li> 
                <li><a href="#"><img src="img/1144953-6-2x.jpg" width="55" alt="1144953 6 2x"></a></li> 
                <li><a href="#"><img src="img/1144953-p-2x.jpg" width="55" alt="1144953 P 2x"></a></li> 
            </ul> 
        </div> 

基本上，我需要了解如何让两个内容区域“匹配”，所以如果我运行一个随机查询，#3 Anchor将匹配UL中的#3LI。我需要运行"forEach“吗？

这是针对jQuery滑块的，因此列表元素只是主要部分的导航缩略图。

有谁有线索吗？

Answer 1

我在这里做了一些假设-但基本上你可以使用foreach循环两次-第一次填充初始HTML "a“链接，第二次循环填充li。

例如，如果您的数组名为items，并且每个元素包含4个键值对，您可以这样做：

<div class="slides_container"> 
<?php
foreach ($items as $i) {
    ?>
    <a href="http://www.zappos.com/{$i['url_slug']}" target="_blank"><img src="img/{$i['img_name']}" width="366" alt="{$i['alt_text']}"></a>
    <?php
}
?>
</div> 
<ul class="pagination">
<?php
foreach ($items as $i) {
?>
    <li><a href="#"><img src="img/{$i['img_name']}" width="55" alt="{$i['alt_text']}"></a></li> 
    <?php
 }
 ?>
 </ul> 
 </div> 

Answer 2

使用两个循环：

<?php
$output = '<div class="slides_container"> ';
for ($i = 0; $i < count($results); $i++){
 $output .= '<a href="http://www.zappos.com/pro-keds-royal-plus-lo-grey" target="_blank"><img src="'.$results[$i]['imageSrc'].'" width="366" alt="'.$results[$i]['alt'].'"></a>';
}
$output .= ' </div> \n\t <ul class="pagination"> ';
for ($i = 0; $i < count($results); $i++) {
$output .= '<li><a href="#"><img src="'.$results[$i]['imageSrc'].'" width="366" alt="'.$results[$i]['alt'].'"></a></li> ';
}
$output .= '</ul> </div> ';

echo $output; 
?>

这是假设您有一个数组数组来存储结果：

results=array(
[0] =>array
 (
   "imageSrc"=>"some image url",
   "alt"=>"some alt text"
 )
)