Question

我使用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']＆lt; - 这是我图片的网址

Answer 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>';
}

}

Answer 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');
        }
    })
})

为每个img元素添加活动类

2 个答案: