如何使每个项目的轮播都处于活动状态？答案

【问题标题】：How to make my carousel active for each item?如何使每个项目的轮播都处于活动状态？
【发布时间】：2020-10-29 08:09:39
【问题描述】：

我想让一个图像在被选中时都处于活动状态，但现在所有项目都处于活动状态

<?php foreach($project_images as $image) {?>

    <?php
        if($image['project_image_name'] != '') {
            $images = '<img src="'.base_url().'public/uploads/project_images/'.$image['project_category'].'/'.$image['project_id'].'/'.$image['project_image_name'].'" >';
        } else {
            $images = '<img src="'.base_url().'public/uploads/project_images/default/default-project-image.jpg'.'" ';
        }
    ?>

    <div class="carousel-item active">
        <?php echo $images; ?>
    </div>

<?php }?>

【问题讨论】：

标签： php html twitter-bootstrap codeigniter carousel

【解决方案1】：

这听起来像是 JavaScript 的工作，而不是 PHP。

我假设 PHP 不知道图像是否处于活动状态，它只是显示图像。

我假设您希望图像在单击时处于活动状态。那是 JavaScript。

第 1 步：不要激活任何东西。

从 div 中删除“活动”。

<div class="carousel-item">
    <?php echo $images; ?>
</div>

第 2 步：为每个 div 指定一个唯一标识符，以便 JavaScript 知道您指的是什么元素。

<?php 
   $id = 0;
   foreach($project_images as $image) {
     $id++;
 ?>

    <?php
         // .. code is the same
    ?>

    <div id="carousel_<?php echo $id ?>" class="carousel-item">
        <?php echo $images; ?>
    </div>

<?php }?>

这应该给每个 div 一个唯一的 id。

第 3 步：创建一个 JavaScript 函数，该函数将切换所选项目的“活动”类。

例如：

function ToggleClass(elemID){
  // Get selected element
  selElement = document.getElementById(elemID);

   //Use selElement to change class.  Code goes here
}

第 4 步：将 JavaScript 函数添加到 div。

注意引号——根据需要使用双引号和单引号。

例如：

<div id="carousel_<?php echo $id ?>" class="carousel-item active" onclick="ToggleClass('carousel_<?php echo $id ?>')">
      <?php echo $images; ?>
 </div>

【讨论】：