js dom操作点击当前显示点击其他隐藏？

Question

点击当前下checks下面的子class为none显示出来，则其他checks，class为none的隐藏，不直接用父隐藏显示的原因，父一直有显示的样式

<div class="checks">
    <div class="none"></div>
    <div class="none"></div>
    <div class="none"></div>
</div>
<div class="checks">
    <div class="none"></div>
    <div class="none"></div>
</div>

var g = document.getElementsByClassName('checks');
for(let i = 0;i<g.length;i++) {
    let none = g[i].getElementsByClassName('none');
    g[i].onclick = function (e) {
        for (let j =0;j<none.length;j++) {
            // if() {
            none[j].style.display = 'block'
            // } else {
            //   none[j].className= 'none'
            // }
        }
        e.stopPropagation();
    }
}

Answer 1

你这个思路是对的，点击当前的div，将当前div的css属性改掉。但是就着这个思路你写的代码还是有些许问题。

1、获取元素放到循环外面去，不然每循环一次都要去获取一次
2、里面逻辑是错的，好好理一理

但是呢，还是有比较好的思路来做这个事情，那就是当你点击某个div的时候，给它加一个class，而不是修改它本身的属性

Answer 2

var g = document.getElementsByClassName('checks');
        
        function ads () {
            var noneFirst =  document.getElementsByClassName('none');
            for (let a = 0; a < noneFirst.length; a++) {
                noneFirst[a].style.display = 'none'
            }
        }
        for(let i = 0;i<g.length;i++) {
            g[i].onclick = function (e) {
                ads()
                var none = g[i].getElementsByClassName('none');
//                none.style.display = 'none'
                for (let j =0;j<none.length;j++) {
                    none[j].style.display = 'block'
                }
                e.stopPropagation();
            }
        }