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>

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>

当然可以改善...

Answer 2

循环无限的原因是while(1)。数字1是真实的，并且不会改变，因此循环将无限期地运行。

这是不使用循环的替代方法，而是在全局范围内存储clickCount变量：

const button = document.querySelector('#click');
button.addEventListener('click', change);
const test = [...document.querySelectorAll('.test')];

let clickCount = 0;

function change() {
  clickCount++;
  test[clickCount % 3].style.outline = '8px ridge rgba(170, 50, 220, .5)';
}

如果您希望第一次单击触发test[0]，则可以改用let clickCount = -1。

如果您希望先前概述的元素丢失其轮廓，则可以将函数更改为：

function change() {
  clickCount++;
  test[clickCount % 3].style.outline = '8px ridge rgba(170, 50, 220, .5)';
  test[(clickCount + 2) % 3].style.outline = 'none';
}

Answer 3

您可以为此使用元素的nextElementSibling和firstElementChild属性，这样就不会陷入无限循环，也不需要使用循环或跟踪索引。请参阅摘要中的示例。

为了简化编码，将样式放到一个类中，然后将其删除并添加到下一个元素。

var button = document.querySelector('#click');
button.addEventListener('click', change);

function change(e) {
  var gridElement = document.querySelector('.grid');
  var outlinedElement = gridElement.querySelector('.outline');

  //remove current outline class if it exists
  if (outlinedElement) {
    outlinedElement.classList.remove('outline');
  }

  //Add it to the next element sibling or if it doesn't exists add it to the first child of grid.
  if (outlinedElement && outlinedElement.nextElementSibling) {
    outlinedElement.nextElementSibling.classList.add('outline');
  } else {
    gridElement.firstElementChild.classList.add('outline');
  }
}

.outline {
  outline: 8px ridge rgba(170, 50, 220, .5);
}

<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>

Answer 4

在这里要做一个活动的类，并且您的计数器i应该不在该函数之内，因为在每次单击中，您都不应将其重置为零。

var button = document.querySelector('#click');
button.addEventListener('click', change);
var test = document.querySelectorAll('.test');
 var i = 0;
function change(e) {
    var activeItem = document.querySelector('.active');
    if(activeItem) activeItem.classList.remove("active");
    
    if (i == test.length) {   
      i = 0;  
    }      
    test[i].classList.add("active");
    i++;
}

.active{
  border: 8px ridge rgba(170, 50, 220, .5);
}

<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>

如何在单击按钮时使用JavaScript遍历元素？

4 个答案: