Question

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

在我的ul下我有两个要素：包含另一个具有“flickity-slider”类和ol

的div的div

我最初开始使用这个脚本，但意识到它会把所有的点都变成类“被选中”

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

访问dom元素练习

1 个答案: