访问dom元素练习

Question

我需要你的帮助来访问dom元素。基本上，我有一个带有项目符号的滑块，我想在每次单击项目符号时记录所选幻灯片的文本内容。

在我的ul下面有两个元素:一个包含另一个div的div，该div具有一个"flickity-slider“类和一个ol

我最初开始使用这个脚本，但是意识到它会把所有的点变成"is-selected“类。

​

var dots = document.querySelectorAll('.dots');
var slide = document.querySelectorAll('.slide');
Array.prototype.forEach.call(dots, edot=>{
  Array.prototype.forEach.call(slide, eslide=>{
    if (edot.className = 'dot is-selected') {
      if (eslide.className = 'slide is-selected') {
        console.log(eslide.textContent);
      }
    }
  });
});

<div class="slider text-center" data-paging="true" data-children="3">
  <ul class="slides flickity-enabled is-draggable" tabindex="0">
    <div class="flickity-viewport" style="height: 362.797px;">
      <div class="flickity-slider" style="left: 0px; transform: translate3d(-296.79%, 0px, 0px);">
        <li class="slide is-selected" style="position: absolute; left: 300%;"> <img alt="Image" src="img/cowork-8.jpg">
        <h5>Gotham Rounded Light</h5>
        <p> Gotham Rounded is a technical letter that<br>goes from scale. </p>
        </li>
        <li class="slide" style="position: absolute; left: 100%;"> <img alt="Image" src="img/cowork-10.jpg">
        <h5>Highlighting data<br></h5>
        <p> We were required to use a lot of graphics. This was extremely challenging, for it is no easy tasks. </p>
        </li>
        <li class="slide" style="position: absolute; left: 200%;"> <img alt="Image" src="img/cowork-11.jpg">
        <h5>Initial Design</h5>
        <p><b>For</b> <b>our</b> <b>first</b> <b>design,</b> we chose a light-colored background to bring out the shadows of the graphics and illustrations.</p>
        </li>
      </div>
    </div>
    <ol class="flickity-page-dots">
      <li class="dot is-selected"></li>
      <li class="dot"></li>
      <li class="dot"></li>
    </ol>
  </ul>
</div>

​

如果能帮上忙，我们将不胜感激。希望我说得很清楚

我看到了之前关于queryselector的评论--我刚刚更新了它

Answer 1

如下所示，您可以根据点的索引来记录相关幻灯片：

const slides = document.querySelectorAll('.slide')
const dots = document.querySelectorAll('.dot')

Array.from(dots).forEach((dot, index) => {
   dot.onclick = () => {
    console.log(slides[index].textContent)
  }
 })

因此，如果您单击点/项目符号1，您将记录幻灯片1的内容。