jquery遍历绑定事件

最新推荐文章于 2023-07-15 15:35:40 发布

原创最新推荐文章于 2023-07-15 15:35:40 发布 · 827 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #遍历 #绑定点击事件

个人小总结专栏收录该内容

23 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="javascripts/http_code.jquery.com_jquery-2.0.0.js"></script>
    <style>
        img{
            width:100%;
            height: 100%;
            border: 1px solid;
        }
    </style>
</head>
<body>
<img src="images/b1_01.png" alt="" style="opacity: 0.2">
<img src="images/b1_01.png" alt="" style="opacity: 0.2">
<img src="images/b1_01.png" alt="" style="opacity: 0.2">
<img src="images/b1_01.png" alt="" style="opacity: 0.2">

<script>
    var $imgs = $("img");
    console.log($imgs.length); 

方法一：for循环

   for(var i=0;i<4;i++){
        //console.log($imgs[i]);
        (function (i) {
            $imgs.eq(i).click(function () {
                console.log(i)
                $imgs.eq(i).css("opacity",1);
            });
        })(i);

    }
   // $imgs.css("opacity",1);

方法二：each方法

 $imgs.each(function () {
        $(this).click(function () {
            $(this).css("opacity",1);
        })
    })
</script>
</body>
</html>