针对所有人，而不仅仅是第一个人

Targeting all li's instead of just the first

本文关键字：不仅仅是 第一个 一个人 所有人      更新时间：2023-09-26

我正在使用Superslides脚本为站点创建响应式幻灯片。我已经创建了一个基本的标题框，我想隐藏它，然后从底部滑动，当幻灯片与标题一起显示。

在Superslide脚本中，当前幻灯片获得更高的z-index(为2，否则设置为0)，并且当它进入视图时，display: block(否则为'none')更改为它。

我不是很好与Javascript，所以我有一点麻烦针对我的标题动画在正确的时间。我把一个脚本放在一起，应该评估所有的li标签(每个li是一个不同的幻灯片)，如果它有一个z-index为2，它改变标题div的底边距，所以它滑入视图。我的问题是，我的脚本只针对第一个li，而不是遍历所有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 ("caption")，这是不好的做法。实际上，我认为这是无效的HTML根据HTML5规范的id应该是唯一的(看看这个stackoverflow线程)。

例子
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;
}
相关文章：