• 图片点击出现边框样式（一图出现边框，其他图取消边框）

    问题人：

     点击第一个图片  添加边框  点第二个图片  怎末把第一个边框去掉呢？

    回答人：
    获取第一个图片的对象

    然后去点边框样式


    去掉

    你这是想实现点击那个 那个就有边框样式吧  其他的没有吧

    问题人：
    嗯嗯
    对

    回答人：
    你得整体去考虑   

    不能只想点第二个 去掉第一个   万一是第三个有样式难道还要去在去掉第三个吗  这样考虑实现太累

    可以从获取这几个的对象集合  然后循环去掉样式

    然后给你点击的加上样式

    就是分成两步去考虑

    第一步就是把所有的都去掉样式

    第二步给点击的元素加上样式

    下面将具体过程：

    //一个div里面由4张图片，希望效果：点击图片1，图片出现蓝色边框；点击图片2，图片出现蓝色边框，并且其他图片边框消失，效果以此类推，

    第一种方法：

    //获取class属性相同（此处为都是text）的图片地址

     var imgs = $(".test");

    //点击图片时

       $(imgs[i]).on('click', function () {

    //取消边框方法

     imgs.each(function(){

                        $(this).removeClass('border');

                     });

    //点击出现边框方法

     $(this).addClass('border');

    }

    到此处实现了此效果。

    第二种方法（取消边框的方法）

     var imgs = $(".test");

            for (var i = 0; i < imgs.length; i++) {

                $(imgs[i]).on('click', function () {

                    closeborder();

                    $(this).addClass('border');

                })

     function closeborder() {

                var photos = document.getElementsByClassName("test");

                alert(photos.length);

                for(var i=0;i

                    $(photos[i]).removeClass('border');

                }

            }

    /*这个方法还可这样写

     function closeborder() {

                var photos = $(".test");

                alert(photos.length);

                for(var i=0;i

                    $(photos[i]).removeClass('border');

                }

            }

     */

    下面为具体代码--测试可以用   

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9. //此处引入jquery
    10.  <script src="./js/jquery.min.js">script>
    11.     <style>
    12.         .border {
    13.             border: 1px solid blue;
    14.         }
    15.     style>
    16. head>
    17.  
    18. <body>
    19.     
    20.  
    21.     <div class="totalimg">
    22.  
    23.         <img class='test' id="one " src="图片1.png">img>
    24.  
    25.         <img class='test' id=" two " src="图片2.png">img>
    26.  
    27.         <img class='test' id="three " src="图片3.png">img>
    28.  
    29.         <img class='test' id="four " src="图片4.png">img>div>
    30. body>
    31. <script type="text/javascript">
    32.     $(function () {
    33.  
    34.         // 第一种方法：
    35.  
    36.         //获取class属性相同（此处为都是text）的图片地址
    37.  
    38.         var imgs = $(".test");
    39.         for (var i = 0; i < imgs.length; i++) {
    40.             $(imgs[i]).on('click', function () {
    41.                 imgs.each(function () {
    42.                     $(this).removeClass('border');
    43.                 });
    44.                 // closeborder();
    45.                 $(this).addClass('border');
    46.             })
    47.         }
    48.  
    49.     })
    50.     function closeborder() {
    51.         var photos = document.getElementsByClassName("test");
    52.         alert(photos.length);
    53.         for (var i = 0; i < photos.length; i++) {
    54.             $(photos[i]).removeClass('border');
    55.         }
    56.     }
    57.  
    58.    
    59.        
    60. script>

  • 相关阅读:
    GO语言开山篇（一）：学习方向
    【Linux】多进程编程
    2022年MBA等专业学位硕士毕业典礼隆重举行
    将本地项目添加到github中的其他办法
    实例010：给人看的时间
    红细胞膜包裹铜纳米颗粒/红细胞膜修饰普鲁兰纳米粒子/载磁性碳/黑磷量子点细胞膜制备
    基于Abaqus-Simpack联合仿真车辆-浮置板轨道耦合动力学仿真
    Vue太难啦！从入门到放弃day07——Vue前端工程化之Webpack
    算法实战：亲自写红黑树之四 插入insert的平衡
    在 Python 中构建高度可扩展的数据流管道
  • 原文地址：https://blog.csdn.net/m0_60164821/article/details/126221834