在 jQuery 中访问列表中项目的 css

Question

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

我的代码：

<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

问题是<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");    }}