进入dom元素练习

Question

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

在我的ul下，我有两个元素：一个div，其中包含另一个具有“ flickity-slider”类的div和一个ol

我最初从这个脚本开始，但是意识到它将把所有的点都变成“已选择”类

 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的内容。