如何使我的转盘对每个项目都处于活动状态

Question

---

我想在选择时每个图像都激活一个，但现在所有项目都是活动的

<?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 }?>

Answer 1

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

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

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

第一步：不要让任何东西处于活动状态

从分区中删除"活动">

<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>