Bootstrap Carousel 更改特定颜色的 div答案

【问题标题】：Bootstrap Carousel Change a particular color divBootstrap Carousel 更改特定颜色的 div
【发布时间】：2020-02-27 20:07:29
【问题描述】：

我在这里有点新，我一直在寻找答案，但我没有找到。

我刚开始是一名网页设计师/网页开发人员。

我在引导程序中有一个图像轮播，顶部有一个 div。这个 div 是页面的简单标题。

我想在“活动”时更改特定图像的颜色标题。我试过这个（因为我看到显示的图像将其类名：“carousel-item”更改为：“carousel-item active”），但不起作用。

这是我的 HTML：

<div id="titulo">Game of thrones</div>
        <div id="carousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item " data-interval="3000">
                    <img src="/img/portrait.jpg" class="d-block w-100" alt="throne">
                </div>
                <div class="carousel-item active"  id="dragon" data-interval="3000">
                    <img src="/img/dragon.jpeg" class="d-block w-100" alt="got" data-interval="3000">
                </div>
                <div class="carousel-item" >
                    <img src="/img/houses.jpg" class="d-block w-100" alt="houses" data-interval="3000">
                </div>
                <div class="carousel-item" >
                    <img src="/img/evil.jpeg" class="d-block w-100" alt="badguy" data-interval="3000">    
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

<script>
       const titulo= document.querySelector("#titulo");
       const dragon=document.querySelector("#dragon");


        if(dragon.classList.contains("active")){
            titulo.style.color = "black";
        }
</script>

【问题讨论】：

标签： javascript html css

【解决方案1】：

您当前的代码不起作用的原因是该脚本仅在页面加载时运行一次。 Bootstrap 带有事件，您可以附加一个函数，这意味着您可以在每次轮播移动时检查类。 You can read more about carousel events here.

使用链接中的示例，您可以使用以下内容，而无需过多更改现有代码：

$('#carousel').on('slid.bs.carousel', function () {
    const titulo = document.querySelector("#titulo");
    const dragon = document.querySelector("#dragon");

    if (dragon.classList.contains("active")) {
        titulo.style.color = "black";
    }
});

注意：事件是 slid 而不是 slide，因为在幻灯片转换完成之前不会应用 active 类。

最好阅读事件的relatedTarget 并检查是否是龙：

$('#carousel').on('slide.bs.carousel', function (evt) {
    const titulo = document.querySelector("#titulo");

    if (evt.relatedTarget.id === 'dragon') {
        titulo.style.color = "black";
    }
});

【讨论】：