排他思想的理解

热爱编程的花甜甜

已于 2023-01-07 16:56:42 修改

阅读量118

点赞数 1

分类专栏：前端学习过程文章标签： javascript 开发语言 ecmascript

于 2022-12-20 20:55:40 首次发布

本文链接：https://blog.csdn.net/acsweetest/article/details/128390210

版权

前端学习过程专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了两种常见的前端算法：排他思想用于实现按钮点击时仅高亮当前按钮，以及表单全选和取消全选功能的实现。通过JavaScript代码示例详细解释了如何遍历元素并绑定事件，以达到预期效果。全选功能涉及监听全选框状态，并同步更新子选框的选择状态；反之，当子选框状态改变时，会自动更新全选框的选中状态。

摘要由CSDN通过智能技术生成

排他思想（算法）

表单全选和取消全选：

排他思想（算法）

1.所有元素全部清除样式（干掉其他人）

2.给当前元素设置样式（留下我自己）

3.注意（1）和（2）的顺序不可以颠倒，只有干掉别人之后菜剩下我自己！

【代码示例】：

<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
</body>
<script>

//1.获取所有按钮元素

var btns=document.getElementsByTagName('button')//兼容

//得到是伪数组第一个的索引号从0开始

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

//第一个外部for循环：遍历给所有按钮设置点击事件
//

    btns[i].onclick=function(){
        // console.log(11);

//第二个内部for循环：遍历“干掉所有人”的样式

     for(var i=0;i<btns.length;i++){
            btns[i].style.backgroundColor='';
        }

//“留下我自己”设置样式

        this.style.backgroundColor='pink';
       
    }
}
  
</script>

list.addEventListener('click',function(e)){
    if(e.target.tagName=='IMG'){
    img.src=e.target.src;
//绑定所有的图片
    imgs.foreach(function(item){
//干掉别人
    item.className='';
    })
//留下我自己
    e.target.className='current';
    }
}

表单全选和取消全选：

【目的】：

1.鼠标点击全选框时，子选框全部被选中（取消时同理）

2.子选框全部被选中后，全选框自动勾选（只要有一个子选框未选中则全选框不会被勾选）

【算法分析】：

1.写出HTML框架

——<thead>表头

<table>

——<tbody>表的内容

   <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll">
                    </th>
                    <th>
                        商品
                    </th>
                    <th>
                        价格
                    </th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>iphone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>ipad pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>ipad air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>apple watch</td>
                    <td>2000</td>
                </tr>
            </tbody>
        </table>
    </div>

2.js部分

（1）鼠标点击全选框时，子选框全部被选中（取消时同理）

 //【获取元素】
 //(1)获取表头复选框（2）获取子表复选框

        var j_cbAll=document.getElementById('j_cbAll');
        var j_tbs=document.getElementById('j_tb').getElementsByTagName('input');


 //【注册事件】
 //给表头复选框绑定点击元素
        j_cbAll.onclick=function(){
            console.log(this.checked);
 //遍历子复选框：若this.checked=true 执行下面语句  若this.checked=false则不执行；

            for(var i=0;i<j_tbs.length;i++){
                j_tbs[i].checked=this.checked;
            }
        }

（2）子选框全部被选中后，全选框自动勾选（只要有一个子选框未选中则全选框不会被勾选）

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

            j_tbs[i].onclick=function(){
                //给每个小按钮绑定点击事件
                //flag控制全选按钮是否选中，设置此变量来控制全选是否被选中
                var flag=true;
                for(var i=0;i<j_tbs.length;i++){
//检查tbody里面的复选框是否被全部选中
                    if(!j_tbs[i].checked){
                        flag=false;
                        bresk;//退出for循环  这样可以提高执行效率 只要有一个不满足剩下的也无需循环，自动退出。
                    }
                }
                j_cbAll.checked=flag;
//若为true则全选框被选中。若为false则说明有子选框未被选中，全选框就不会被选中
            }
        }

        //第一个for循环遍历是为了给所有tbody里的复选框增加点击事件
        //第二个for循环遍历是为了检查tbody里的复选框是否被全部选中

热爱编程的花甜甜

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
排他思想的理解

（2）子选框全部被选中后，全选框自动勾选（只要有一个子选框未选中则全选框不会被勾选）——表的内容。（1）鼠标点击全选框时，子选框全部被选中（取消时同理）2.子选框全部被选中后，全选框自动勾选（只要有一个子选框未选中则全选框不会被勾选）——表头。1.鼠标点击全选框时，子选框全部被选中（取消时同理）1.所有元素全部清除样式（干掉其他人）2.给当前元素设置样式（留下我自己）
复制链接

扫一扫