javascript - Bootstrap Carousel 更改特定颜色的 div

Question

我是新来的，我一直在寻找答案，但我没有找到。

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

我在 bootstrap 中有一个图像轮播，在它的顶部有一个 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>

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