多个背景按钮，点击其中一个，其它状态改变

最新推荐文章于 2020-11-01 21:58:08 发布

大猫媛

最新推荐文章于 2020-11-01 21:58:08 发布

阅读量1.2k

点赞数

分类专栏： JavaScript 文章标签： JavaScript 点击切换

本文链接：https://blog.csdn.net/kikocsdn/article/details/77195721

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在做一个类似开灯关灯的开关效果，多个开关的状态变化，嗯，只是前端效果。

先看HTML代码，很简单

<input type="image" src="img/kgclose.png"  value="0" />
<input type="image" src="img/kgclose.png"  value="0" />
<input type="image" src="img/kgclose.png"  value="0" />
<input type="image" src="img/kgclose.png"  value="0" />

接下来看JS：

我们一般避免直接在标签里面绑定click事件

<script>
        $(function (){
            $("input").on('click', test1);
        });
        function test1(){
            //获得当前元素的兄弟节点
           var sib=$(this).siblings();
            if($(this).val() == '0'){
            //当其value值为0的时候改变背景
               $(this).attr('src','img/kgopen.png');
            //背景改变之后value值置1
               $(this).val('1') ;
                if($(sib).val() == '1'){
             //判断兄弟节点的状态
                  $(sib).attr('src','img/kgclose.png');
                }
            }else{
              //value值不为0的时候，又改变背景状态
                $(this).attr('src','img/kgclose.png');
                $(this).val('0') ;
            }
        }
    </script>