问题遇到的现象和发生背景
想通过修改照片的类名来修改照片显示的层级z-index
问题相关代码,请勿粘贴截图
<script type="text/javascript">
$(function(){
// 事件:点击左右按钮,点击下一个按钮下一个层级变高
// 获取img集合
var $imgs = $('.imgs img');
// var $lis = $('.pointers li');
// 获取左右按钮
var $leftBut = $('.leftBut');
var $rightBut = $('.rightBut');
$leftBut.click(function(){
nextPage(false);
})
$rightBut.click(function(){
nextPage(true);
})
// 传入一个形参,来确定是否是下一张
function nextPage(next){
for(var i = 0;i< $imgs.length; i++){
// $imgs.index =i;
// console.log($imgs.index);
// $('.imgs img').removeClass('num1')
if(next){
$('.imgs img').toggleClass('num1');
i++;
console.log(i);//1 3 5
console.log($imgs[i]);//图片2 图片4
// $('.imgs img').toggleClass('num1');
// $imgs[i].eq(i).addClass('num1')
$('.imgs img')[i].addClass('num1');
// $('.imgs img').removeClass('num1');
}else{
i--;
}
}
}
})
</script>
运行结果及报错内容
$imgs[i].addClass is not a function;
我的解答思路和尝试过的方法
我想通过 $imgs.each()方法来遍历 $imgs集合,将当前索引赋值给当前显示的图片,但是不能成功赋值
通过修改 $imgs[i].css('zIndex','2');来修改层级,报错 $imgs[i].css('zIndex','2')is not a function;
以及上述解决办法。
我想要达到的结果
想通过修改照片的类名来修改照片显示的层级z-index,点击下一张,可以将下一张图片的层级提高