Question

我想单击按钮，将具有颜色的类名称从活动元素转移到下一个。

这不是我真正了解的任务，但我阻止了

var el = document.getElementById('one');
var boxDiv = document.getElementsByClassName('.box');
var btnCh = document.getElementById('changeColor');

btnCh.onclick = function() {
  if (boxDiv.classList.contains('green')) {
    boxDiv.nextSiblings.classList.add('green');
    boxDiv.previousSiblings.classList.add('green');
  }
}

<div class="row">
  <div class="box"><span>1</span></div>
  <div class="box green" id="one"><span>2</span></div>
  <div class="box "><span>3</span></div>
  <div class="box"><span>4</span></div>
</div>
<div class="row">
  <button id="changeColor">add class</button>
</div>

https://codepen.io/hesham-farag/pen/MZLxeM

Answer 1

您的代码有几个问题（请始终在控制台中检查错误）。

首先，了解节点和节点集之间的区别。像getElementsByClassName这样的函数会返回一个节点 set ，它是节点的数组状集合。因此，您无法按原样对它们运行节点方法，即，这将导致错误：

boxDiv.nextSiblings(... //boxDiv is not a node; it's a nodeset

因此，您需要遍历节点集并依次处理每个元素。

接下来，nextSiblings和previousSiblings是无效方法；它们应该是单数形式，而不是复数形式。

接下来，您假设有下一个和上一个同级。由于明显的原因，这将在第一个.box格和最后一个div上出错。

此外，我们在这里：

通常最好避免“ 0级” DOM事件，例如.onclick，而使用addEventListener()。造成这种情况的原因有很多，超出了此答案的范围。
这几天，除非需要支持旧的浏览器，否则最好使用let比var

让我们共同努力

let
parent = document.querySelector('#row'),
boxDiv = document.querySelectorAll('.box'),
btnCh = document.querySelector('#changeColor')
;

btnCh.addEventListener('click', evt => {
    boxDiv.forEach(el => {
        if (el.classList.contains('green')) {
            if (el.nextSibling) el.nextSibling.classList.add('green');
            if (el.previousSibling) el.previousSibling.classList.add('green');
        }
    });
}, false);

Answer 2

您必须在这里创建一些逻辑。如果要从所有列表中选择一个彩色框，则必须记住先前的主框。因此，您将编写下一条说明：

html：

<div class="row">
  <div class="box main"><span>1</span></div>
  <div class="box green" id="one" ><span>2</span>   </div>
</div>
<button>Change main box</button>

js：

let boxes = Array.from(document.querySelectorAll(".box"));
let button = document.getElementsByTagName('button')[0];
let mainBoxIndex = 0;

button.addEventListener('click', function() {
  boxes[mainBoxIndex].classList.remove('main');
  mainBoxIndex = (mainBoxIndex + 1 < boxes.length) ? mainBoxIndex + 1 : 0;
  boxes[mainBoxIndex].classList.add('main');
});

在这里可以仔细查看：https://codepen.io/anon/pen/jXJyqQ 希望对您有所帮助。

添加类并从元素中删除花药兄弟姐妹-JavaScript教程

2 个答案: