Javascript 针对所有li'；这不是第一个

我正在使用脚本为一个站点创建一个响应性幻灯片。我已经创建了一个基本的标题框，我想隐藏它，然后在显示带有标题的幻灯片时从底部滑入

在Superslide脚本中，当前幻灯片的z索引更高（为2，否则设置为0），并且显示：block（否则为“无”）在进入视图时更改

我对Javascript不是很在行，所以我有点难以在正确的时间将我的字幕设置成动画。我编写了一个脚本，用来计算所有li标记（每个li都是不同的幻灯片），如果它的z索引为2，则会更改标题div的底边距，以便将其滑入视图。我的问题是，我的脚本只针对第一个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:

你好
这是一个测试
看看我能不能让它工作1



你好
这是一个测试
看看我能不能让它工作1



你好
这是一个测试
看看我能不能把这件事做好



你好
这是一个测试
看看我能不能把这件事做好



你好
这是一个测试
看看我能不能把这件事做好

尝试使用而不是querySelector

然后，你可以在li's中循环并应用你的样式，等等

我还看到您使用了多个具有相同id（“标题”）的元素，这是一种糟糕的做法。实际上，根据HTML5规范，我认为它是无效的HTML，因为id应该是唯一的（看看这个）

范例

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';
    }
}

---

你有你的现场演示吗？这将更容易帮助您。当您将jQuery加载到页面上时，尝试使用所有jQuery，因为这将减少您编写的代码量。关于匹配id的一点很好-它应该是一个id类，然后它将变得有效和有用。如果您有多个具有相同id的元素，并且您选择了该id，浏览器将始终找到第一个元素并停止查找。非常感谢！工作得很有魅力。我确实知道ID业务，不幸的是，我读到的所有信息都建议使用getElementById选项，我找不到类替换。

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';
    }
}

.caption {
    transition: bottom 10s;
}