Shirley~~ 2022-06-23 16:51 采纳率: 90%
浏览 19
已结题

使用jquery来修改照片的层级

问题遇到的现象和发生背景

想通过修改照片的类名来修改照片显示的层级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,点击下一张,可以将下一张图片的层级提高

  • 写回答

1条回答 默认 最新

  • 你好!机器人 2022-06-23 16:59
    关注

    用eq试下
    $('.imgs img').eq(i).addClass('num1')

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 7月1日
  • 已采纳回答 6月23日
  • 创建了问题 6月23日

悬赏问题

  • ¥15 Qt下使用tcp获取数据的详细操作
  • ¥15 idea右下角设置编码是灰色的
  • ¥15 全志H618ROM新增分区
  • ¥15 在grasshopper里DrawViewportWires更改预览后,禁用电池仍然显示
  • ¥15 NAO机器人的录音程序保存问题
  • ¥15 C#读写EXCEL文件,不同编译
  • ¥15 MapReduce结果输出到HBase,一直连接不上MySQL
  • ¥15 扩散模型sd.webui使用时报错“Nonetype”
  • ¥15 stm32流水灯+呼吸灯+外部中断按键
  • ¥15 将二维数组,按照假设的规定,如0/1/0 == "4",把对应列位置写成一个字符并打印输出该字符