Javascript 让所有孩子'；使用document.querySelector创建

当定义插入点时，我使用

交叉点观察者

加载内容。我将它与一个

引导4旋转木马一起使用，交叉点在
h1
中。问题是，脚本仅捕获第一个
h1
，如果用户在其上进行交叉时旋转木马转到第二个
h1
，滑块不会出现，因为添加的
类显示带有
动画的内容，该类仅应用于第一个
div h1
父内容。所以，我想得到所有的
h1
，而不仅仅是第一个。我试图用第一个
h1
永远停止交叉路口的旋转木马，但当它最后用
动画显示时，我无法再次启动它。你可以在页面中间看到一个例子。

// Instantiate a new Intersection Observer
let observer5 = new IntersectionObserver(onEntry5);
let test = document.querySelector('#carouselExampleControls3');


let element5 = document.querySelector(".test-h1");
observer5.observe(element5);

function onEntry5(entry5) {

  if (entry5[0].isIntersecting) {
    test.classList.add("active");

  }
}

HTML

欢迎使用
document.querySelectorAll（）
！获取与查询匹配的所有元素，然后使用
forEach
循环应用您想要的任何功能

资源：

对于您的用例，我会这样做：


const carousels=document.queryselectoral（'.wrapper carousel thingy'）；
if（传送带）{
旋转木马。forEach（（旋转木马）=>{
const trigger=carousel.querySelector（'.some内部触发器元素'）；
trigger.addEventListener（'mouseenter'，（）=>{
carousel.classList.add（'active'）；
});
trigger.addEventListener（'mouseleave'，（）=>{
carousel.classList.remove（'active'）；
});
});
}
.wrapper carousel thingy{
边框：2件纯黑；
填充：20px；
}
.wrapper-carousel-thingy.active{
边框颜色：红色；/*边框颜色更改只是一个示例，说明如何根据内部元素的悬停更新父元素*/
}
.一些内部触发元素：悬停{
背景：黄色；/*只是强调哪个元素是触发器*/
}

我是扳机
你能把它插入我在问题中提供的JS代码中吗？我不知道需要在哪里以及如何插入它。谢谢。好的，如果你遵循我给出的例子，请告诉我。对不起，我是JS的新手。顺便说一句，这是你的网站，设计很好！。
<div id="carouselExampleControls3" class="carousel slide test-slider" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active carousel-item-left">
<div class="container">
    <div class="row">
        <div class="banner col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mx-auto">
            <img alt="Bootstrap Image Preview" src="img/_MG_6501-copia.jpg" class="img-thumbnail" style="padding-right: 200px;padding-bottom: 200px;border: 0px; ">
      <h1 class="test-h1" style="z-index: 1000000;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    color: #c33e69;
    font-size: 5em;
    position: absolute;
    right: 70px;
    bottom: 60px;
    width: 363px;">ESTA ES MI SEGUNDA CASA</h1>
        </div>
    </div>

</div>    </div>

<div class="carousel-item carousel-item-next carousel-item-left">
<div class="container">
    <div class="row">
        <div class="banner col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mx-auto">
            <img alt="Bootstrap Image Preview" src="https://www.eharmony.co.uk/dating-advice/wp-content/uploads/2011/04/profilephotos.jpg" class="img-thumbnail" style="padding-right: 200px;padding-bottom: 200px;border: 0px; ">
      <h1 class="test-h1" style="     z-index: 1000000;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    color: #c33e69;
    font-size: 5em;
    position: absolute;
    right: 70px;
    bottom: 60px;
    width: 363px;">ESTA ES MI SEGUNDA CASA</h1>
        </div>
    </div>

</div>    </div>

</div>
      </div>

#carouselExampleControls3 {opacity: 0; transition: 1.5s opacity;}
#carouselExampleControls3.active {opacity: 1;  cursor: pointer;
  animation: zoomin 1.5s alternate infinite;
  animation-iteration-count: 1;
  animation-fill-mode:  forwards;}