Question

你能帮助我使用这个普通的js代码，因为我想将className“active”从item移动到另一个项目，包括删除所有元素类并将其保存在this.item

function moveClass(){

  var item = document.getElementsByClassName('item');

  for(var i = 0 ; i < item.length ; i++){

    var items = item[i];

    items.onclick=function(){

    items.classList.remove('active');
    this.classList.add('active');

    }
  }

}

window.addEventListener('load',moveClass)

Answer 1

您可以使用document.querySelector('.item.active')查找当前有效项目，并从中删除.active。之后，只需将活动分配给点击的项目（fiddle）：

function moveClass() {

    var items = document.getElementsByClassName('item');

    for (var i = 0; i < items.length; i++) {

        items[i].onclick = function () {
            var prevActive = document.querySelector('.item.active');

            prevActive !== null && prevActive.classList.remove('active');

            this.classList.add('active');
        }
    }

}

document.addEventListener('DOMContentLoaded', moveClass);

Answer 2

遍历每个项目并从中删除active类。然后将active添加到this（被点击的项目）

function moveClass(){
  var items = document.getElementsByClassName('item');
  for(var i = 0 ; i < items.length ; i++){    
    items[i].onclick=function(){
      for (var j = 0; j < items.length; j++) {
        items[j].classList.remove('active');
      }
      this.classList.add('active');
    }
  }
}

window.addEventListener('load',moveClass)

http://jsfiddle.net/zutqwdf8/

使用纯JavaScript在不使用jQuery的情况下在元素之间移动类

2 个答案: