访问 jQuery 列表中的 css 项

Question

我想制作一个简单的图像列表（类似于幻灯片），一开始只显示第一张（将 display: none; 放在整个 class 上，将 display: block 放在第一种）并且我添加了按钮以在图片之间切换。所以我显示了我的一张图片，箭头看起来不错，但是当我按下侧面的按钮时，我无法让它工作。我用 materialize 来创建这个但改变了它并想自己做。

我的代码：

<div class="slider">
    <div class="left">
        <img class="arrow" id="arrow_left" src="imgs/arrow_left.png" alt="">
    </div>
    <ul class="slike_lista">
        <li class="slider_image"><img class="slide_photo" src="imgs/test.jpg" alt=""></li>
        <li class="slider_image"><img class="slide_slike" src="imgs/test2.jpg" alt=""></li>
        <li class="slider_image"><img class="slide_slike" src="imgs/test3.jpg" alt=""></li>
    </ul>
    <div class="right">
        <img class="arrow" id="arrow_right" src="imgs/arrow_right.png" onclick="NextImage();" alt="">
    </div>
</div>

jQuery部分：

var bannerImages= $(".slider_image");
var position= 0;
var numberOfImages= bannerImages.length;
function NextImage(){
    if(position+1 >= brojSlika){
        bannerImages[position].css('display', "none");
        position= 0;
        bannerImages[position].css('display', "block");
    }
    else{
        bannerImages[position].css('display', "none");
        position+= 1;
        bannerImages[position].css('display', "block");
    }
}

我试着用常规的 .toggle 来做，但是没有用，同样的事情发生在 .css

按下按钮时的错误：

Uncaught TypeError: bannerImages[position].css is not a function

与切换或其他任何东西一样。我试图修复它，但我只是不知道如何，我很糟糕 javaScript...

Answer 1

正如上面 Taplar 评论的那样，问题是 <ajQueryObject>[#] 删除了访问 jQuery 方法的选项。解决方案是改用.eq(position)。

这是编辑后的代码：

var bannerImages= $(".slider_image");
var position= 0;
var numberOfImages= bannerImages.length;
function NextImage(){
    if(position+1 >= brojSlika){
        bannerImages.eq(position).css('display', "none");
        position= 0;
        bannerImages.eq(position).css('display', "block");
    }
    else{
        bannerImages.eq(position).css('display', "none");
        position+= 1;
        bannerImages.eq(position).css('display', "block");
    }
}

访问 jQuery 列表中的 css 项

Access the css of items in list in jQuery

html

javascript

jquery

web-deployment

web