鍍金池/ 問答/HTML5  HTML/ js dom操作點擊當(dāng)前顯示點擊其他隱藏?

js dom操作點擊當(dāng)前顯示點擊其他隱藏?

點擊當(dāng)前下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();
    }
}
回答
編輯回答
孤毒

你這個思路是對的,點擊當(dāng)前的div,將當(dāng)前div的css屬性改掉。但是就著這個思路你寫的代碼還是有些許問題。

1、獲取元素放到循環(huán)外面去,不然每循環(huán)一次都要去獲取一次
2、里面邏輯是錯的,好好理一理

但是呢,還是有比較好的思路來做這個事情,那就是當(dāng)你點擊某個div的時候,給它加一個class,而不是修改它本身的屬性

2017年6月16日 18:44
編輯回答
爆扎
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();
            }
        }
2018年6月16日 09:45