javascript-定位所有li而不是仅定位第一个

我正在使用Superslides脚本为网站创建响应式幻灯片.我创建了一个基本的字幕框,要隐藏它,然后在显示带有字幕的幻灯片时从底部滑入.

在Superslide脚本中,当前幻灯片的Z索引较高(为2,否则设置为0),并且在显示时会对其进行更改：display：块(否则为“ none”).

我对Javascript不太满意,因此在将字幕定位到适当的时间进行动画制作时遇到了一些麻烦.我整理了一个脚本,该脚本应该评估所有li标签(每个li是一张不同的幻灯片),并且如果z索引为2,它将更改标题div的下边距,使其滑入视图.我的问题是我的脚本仅以第一个li为目标,而不是全部运行.对于第一个li来说,它很好用,我只需要它与其余li一起运行即可.任何建议表示赞赏！

脚本：

var li = document.querySelector('li[style]'),
    inlinezIndex = li.style.zIndex;
    console.log(inlinezIndex);
   if(inlinezIndex == 2){
       document.getElementById('caption').style.bottom = '300px';
       $('#caption').css({'transition': '10s'});
   }
   else{
       document.getElementById('caption').style.bottom = '0px';
   }

HTML：

<div id="slides">
    <ul class="slides-container">
      <li class="slide1">
          <img src="images/people.jpeg" alt="Cinelli">
          <div id="caption">
              <h1>Hello</h1>
              <h2>This is a test</h2>
              <p>To see if I can get this to work1</p>
          </div>
      </li>
      <li class="slide1">
          <img src="images/surly.jpeg" width="1024" height="682" alt="Surly">
          <div id="caption">
              <h1>Hello</h1>
              <h2>This is a test</h2>
              <p>To see if I can get this to work1</p>
          </div>
      </li>
      <li class="slide1">
          <img src="images/cinelli-front.jpeg" width="1024" height="683" alt="Cinelli">
          <div id="caption">
              <h1>Hello</h1>
              <h2>This is a test</h2>
              <p>To see if I can get this to work2</p>
          </div>
      </li>
      <li class="slide1">
          <img src="images/affinity.jpeg" width="1024" height="685" alt="Affinity">
          <div id="caption">
              <h1>Hello</h1>
              <h2>This is a test</h2>
              <p>To see if I can get this to work3</p>
          </div>
      </li>
      <li class="slide1">
          <img src="images/cinelli-front.jpeg" width="1024" height="683" alt="Cinelli">
          <div id="caption">
              <h1>Hello</h1>
              <h2>This is a test</h2>
              <p>To see if I can get this to work4</p>
          </div>
      </li>
    </ul>

    <nav class="slides-navigation">
      <a href="#" class="next"><i class="icon-chevron-right"></i></a>
      <a href="#" class="prev"><i class="icon-chevron-left"></i></a>
    </nav>
  </div>

解决方法:

尝试使用querySelectorAll而不是querySelector.

然后,您可以遍历li并应用您的样式等.

另外,我看到您正在使用具有相同ID(“标题”)的多个元素,这是不好的做法.实际上,我认为根据HTML5规范,这是无效的HTML,因为id应该是唯一的(请看此stackoverflow thread).

例

var list = document.querySelectorAll('.slides-container li');
for (var i = 0; i < list.length; i++) {
    var li = list[i];
    var zIdx = li.style.zIndex;
    // Use a class instead of id for captions
    var caption = li.querySelector('.caption');
    if (zIdx == 2) {
        caption.style.bottom = '300px';
    } else {
        caption.style.bottom = '0px';
    }
}

我还将CSS转换放入CSS(handy-dandy transitions)中：

.caption {
    transition: bottom 10s;
}

javascript-定位所有li而不是仅定位第一个

相关推荐