在轮播滑块php中突出显示item-active中的活动子项答案

【问题标题】：Highlight the active subitem inside item-active in carousel slider php在轮播滑块php中突出显示item-active中的活动子项
【发布时间】：2017-11-02 13:06:53
【问题描述】：

我正在尝试实现如下图所示。我想创建一个图像轮播滑块，其中我有 4 个项目，每个项目有 4 个幻灯片。这些图像就像一个单选按钮选择我从数据库中获取列表，所以我想通过突出显示选中的幻灯片来突出显示哪个单选按钮被选中。因此，每当轮播加载时，它应该突出显示被选为无线电输入的幻灯片

Simple Carousel

这是它的链接：https://bootsnipp.com/snippets/featured/simple-carousel

这是我的代码：

<div class="carousel-inner">

<?php
  $result = '';
  foreach ($template_data as $key => $value) {

    if ($key == 0) {
      $result .= '<div class="item active">';
    }
    elseif ($key !=0 && ($key % 4 == 0)) { 
      //to avoid first empty "active"
      $result .= "</div>";
      $result .= '<div class="item">';
    }

    $result .= '<div class="col-md-3"><a href="#"><img src="http://placehold.it/250x250" alt="#" title="#"></a></div>';
  }

  $result .= '</div>';
  echo $result;
?> 

</div>

【问题讨论】：

标签： javascript php twitter-bootstrap css

【解决方案1】：

您的基本前提对我来说看起来不错，尽管突出问题的example on jsFiddle 或类似内容会好得多。对于未来的问题，请考虑一下。

同时，我可能会考虑重新组织您的代码，这样您在编写开始和结束元素标记时就不会出现歧义。如果您打开标签，请将其关闭。总是：

<?php
    $result = '';
    foreach ($template_data as $key => $value) {

        $cssClass = 'item';
        if ( /* Your test to determine 'active'; you currently have $key == 0 */ ) {
            $cssClass .= ' active';
        }

        $result .= "<div class='$cssClass'><div class='col-md-3'><a href='#'><img src='http://placehold.it/250x250' alt='#' title='#'></a></div></div>";
    }

    echo $result;
?>

唯一需要的 if 检查应该是确定项目是否处于活动状态。如果是这样，请相应地修改它。否则，每个项目的循环都是相同的。以后更容易编写、阅读和推理。

【讨论】：