为每个 img 元素添加活动类答案

【问题标题】：Add active Class for each img element为每个 img 元素添加活动类
【发布时间】：2015-04-28 17:15:33
【问题描述】：

我正在使用 Twitter Bootstrap ，我想在我的 for 循环中添加活动类，找到了一些带有 <nav> 元素的文章，但我仍然无法让它工作。这是我的代码：

<?php

    $tablename = "banners";
    $type= 'slider';

    $displayBanner = new Display($tablename);
    $BannerDataDisplay = $displayBanner->getAllDataByStatusType($type);
    //`id`, `bannerName`, `bannerURL`, `status`, `createdBy`, `CreatedDate`
    //var_dump($BannerDataDisplay);
    echo '
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
    ';

    for($i=0;$i<count($BannerDataDisplay);$i++){
        echo' <div class="item active">
        <img src="app/'.$BannerDataDisplay[$i]['bannerURL'].'" alt="Slide">
      </div>';
    }

    echo '
        </div>
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    ';
?>

PS：如果你能解决这个问题，请使用这个变量：$BannerDataDisplay[$i]['bannerURL']

【问题讨论】：

您希望“活动”类对 div 做什么？
我想将活动类设置为每个活动的 div 元素，如果来自 twitter 引导程序的滑块脚本
上面的代码有什么问题？
它显示所有图像，因为在我的 for 循环中我已经为 img 元素添加了活动类，我希望它动态地为每个元素显示活动类，而不是每个人

标签： php html css twitter-bootstrap for-loop

【解决方案1】：

好的，我解决了，不得不从 Wordpress 中搜索一些相关文章：

for ($i=0; $i < count($BannerDataDisplay); $i++) {
if ($i==0) {
    echo ' <div class="item active">
        <img src="app/' . $BannerDataDisplay[$i]['bannerURL'] . '" alt="Slide">
      </div>';
} else {
    echo '<div class="item">
        <img src="app/' . $BannerDataDisplay[$i]['bannerURL'] . '" alt="Slide">
      </div>';
}

}

【讨论】：

【解决方案2】：

For current image here you go:
$('.sliderTrigger').on('click', function() {
    var index = $(this).attr('data-slide-to');
    console.log(index);
    $('#myGallery .carousel-inner .item').removeClass('active');
    $('#myGallery .carousel-inner .item').each(function(i,element) {
        console.log(i)
        if(i == index) {
            $(this).addClass('active');
        }
    })
})

【讨论】：