Question

我正在使用Intersection Observer在定义插入点时加载内容。我将其与bootstrap 4 carousel配合使用，交点在h1中。问题在于脚本仅捕获第一个h1，如果当用户在其上进行交集时轮播转到第二个h1，则不会显示滑块，因为添加的{{1 }}中带有class的内容仅适用于前animation个父内容。因此，我想获得所有的div h1，而不仅仅是第一个。我试图将旋转木马与第一个h1永远停下来，但是当它最终与h1一起显示时，我无法再次启动它。您可以在页面中间看到一个示例here。

animation

HTML

// 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");

  }
}

CSS

<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>

Answer 1

欢迎来到document.querySelectorAll()！抓取所有与查询匹配的元素，然后使用forEach循环来应用所需的任何功能。

资源：https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

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

const carousels = document.querySelectorAll('.wrapper-carousel-thingy');

if (carousels) {
  carousels.forEach((carousel) => {
    const trigger = carousel.querySelector('.some-inner-trigger-element');
    trigger.addEventListener('mouseenter', () => {
      carousel.classList.add('active');
    });
    trigger.addEventListener('mouseleave', () => {
      carousel.classList.remove('active');
    });
  });
}

.wrapper-carousel-thingy {
  border: 2px solid black;
  padding: 20px;
}
.wrapper-carousel-thingy.active {
  border-color: red; /* border color change just an example of how you can update the parent element based on hover of interior element */
}
.some-inner-trigger-element:hover {
  background: yellow; /* just to emphasize which element is the trigger */
}

<div class="wrapper-carousel-thingy class-that-makes-me-unique"> <!-- as many of these as you want -->
  <div class="whatever-in-between">
    <h1 class="some-inner-trigger-element">I am the trigger</h1>
  </div>
</div>

使用document.querySelector获取所有孩子的

1 个答案: