javascript - 如何在按钮单击时使用 javascript 循环遍历元素？

Question

我试图在单击按钮时勾勒出 3 个框。在下一次单击时，轮廓将转移到下一个框，这将继续。尝试使用循环，目前的一个是无限循环。

var button = document.querySelector('#click');
    button.addEventListener('click', change);
    var test = document.querySelectorAll('.test');
    
        function change(e){
                var i = 0;
                while(1){
                    if(i == 2){
                        test[i].style.outline = '8px ridge rgba(170, 50, 220, .5)';
                        i = 0;
                        continue;
                    }
                    else{
                        test[i].style.outline = '8px ridge rgba(170, 50, 220, .5)';
                        i++;
                        
                    }
                }
        }

<div class="container">
                <div class="grid">
                    <div class="test">test</div>
                    <div class="test">test</div>
                    <div class="test">test</div>
                </div>
                <button id="click">Click</button>
        </div>

标签： javascriptcssdom

Answer 1

嗨，只需添加一个变量计数器，每次单击时都会递增，当计数器等于 div 的最大值时，它会返回 1。

像那样

 <script>
    var button = document.querySelector('#click').addEventListener('click', onClick);
    var allDiv= document.querySelectorAll('.test');
    var count=0;
    function onClick(e){
        if (count >= allDiv.length){
            count = 0;
        }
        for (let i = 0; i < allDiv.length; i++) {
            allDiv[i].style.outline = '';
        }
        allDiv[count].style.outline = '8px ridge rgba(170, 50, 220, .5)';
        count = count + 1;
    }
</script>

当然可以改进...