0

我有一些元素我想用一个函数来切换，但由于某种原因我无法让它工作。执行切换功能时，控制台记录“无法读取未定义的属性类列表”。但是如果我在函数启动之前记录它们，我可以看到这些元素。

Javascript

const toggle = element => {
    element.classList.toggle('toggle');
};

let numberOfProyects = document.getElementsByClassName('portfolio__item'),
    proyects = [],

  for (var i = 0; i < numberOfProyects.length; i++) {
    proyects[i] = document.getElementById(`proyect${i+1}`);
  
    console.log(proyects[i]);
  
    new IntersectionObserver(()=>{
      toggle(proyects[i])
    },{threshold: .6}).observe(proyects[i]);
  };

HTML

<div class="portfolio__item toggle" id="proyect1">
            <h3 class="portfolio__item-title">Podomoro Timer</h3>
            <img class="portfolio__item-img" src="assets/images/Captura de pantalla (316).png">
            <div class="portfolio__item-links">
                <div class="overlay portfolio__item-links-overlay">
                    <a target="_blank" href="https://js-codetalker.github.io/Timer/" class="portfolio__item-links-overlay-link">
                        <img src="assets/images/world.svg" class="portfolio__item-links-overlay-link-img">
                        <p class="portfolio__item-links-overlay-link-txt">Go proyect</p>
                    </a>
                </div>
                <div class="overlay portfolio__item-links-overlay">
                    <a target="_blank" href="https://github.com/Js-codetalker/Timer" class="portfolio__item-links-overlay-link">
                        <img src="assets/images/github.svg" class="portfolio__item-links-overlay-link-img">
                        <p class="portfolio__item-links-overlay-link-txt">Go github</p>
                    </a>
                </div>
            </div>
        </div>
        <div class="portfolio__item toggle" id="proyect2">
            <h3 class="portfolio__item-title">Sample Restaurant</h3>
            <img class="portfolio__item-img" src="assets/images/Captura de pantalla (317).png">
            <div class="portfolio__item-links">
                <div class="overlay portfolio__item-links-overlay">
                    <a target="_blank" href="https://js-codetalker.github.io/restaurant-example/" class="portfolio__item-links-overlay-link">
                        <img src="assets/images/world.svg" class="portfolio__item-links-overlay-link-img">
                        <p class="portfolio__item-links-overlay-link-txt">Go proyect</p>
                    </a>
                </div>
                <div class="overlay portfolio__item-links-overlay">
                    <a target="_blank" href="https://github.com/Js-codetalker/restaurant-example" class="portfolio__item-links-overlay-link">
                        <img src="assets/images/github.svg" class="portfolio__item-links-overlay-link-img">
                        <p class="portfolio__item-links-overlay-link-txt">Go github</p>
                    </a>
                </div>
            </div>
        </div>

我想要的是为每个元素创建一个不同的观察者，以便在到达视口中的预期空间时删除类“切换”

4

1 回答 1

0

（几乎）在循环内定义变量时始终使用let而不是另外，您不需要将元素存储在第二个数组中。varfor

const toggle = element => {
    element.classList.toggle('toggle');
  console.log(element);
};

const proyects = document.getElementsByClassName('portfolio__item');

for (let i = 0; i < proyects.length; i++) {
  new IntersectionObserver(() => {
    toggle(proyects[i])
  }, {
    threshold: .6
  }).observe(proyects[i]);
};
.container
{
  border: 1px solid black;
  resize: both;
  overflow: auto;
  width: 20em;
  height: 10em;
}
.container > :after
{
  content: attr(id) " class is " attr(class);
}
.container > :not(.toggle) {
  background-color: pink;
}

.container >.toggle {
  background-color: lightgreen;
}
<div class="container">
  <div class="portfolio__item toggle" id="proyect1">
    <h3 class="portfolio__item-title">Podomoro Timer</h3>
  </div>
  <div class="portfolio__item" id="proyect2">
    <h3 class="portfolio__item-title">Sample Restaurant (has not toggle by default)</h3>
  </div>
  <div class="portfolio__item toggle" id="proyect3">
    <h3 class="portfolio__item-title">test</h3>
  </div>
  <div class="portfolio__item toggle" id="proyect4">
    <h3 class="portfolio__item-title">test</h3>
  </div>
</div>

于 2021-07-25T23:24:29.297 回答