在 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");

    }

}