javascript - 删除上一张幻灯片上的类

Question

我正在使用ant design和reactjs开发轮播。

我正在尝试制作这个 slider 3d smooth carousel我成功地做到了。

我的问题出在上一张图片的左侧。我无法删除每次轮播更改时添加的类，该类应该始终位于最后一张幻灯片中，而不是所有以前的幻灯片中。

希望你能理解我。

谢谢。

SAMPLE CODE

constructor(props) {
    super(props);
    this.state = {
      prev: 0
    };
    this.onChange = this.onChange.bind(this);
  }

  onChange(a, b, c) {
    this.setState({
      prev: b
    });
  }
  // onLoad
  componentDidUpdate() {
    var list = document.getElementsByClassName("slick-slide");
    list[this.state.prev].classList.add("prev");
  }
  // onChange
  componentWillUpdate() {
    var list = document.getElementsByClassName("slick-slide");
    list[this.state.prev].classList.add("prev");
  }

Answer 1

您可以在使用此函数将类分配给新元素之前删除该类的所有出现:

function removeClassFromPrevious() {
   var elements = document.getElementsByClassName("prev");

   var array = [].slice.call(elements);

   array.forEach(function(item, index){      
      item.classList.remove("prev");
   });

}

所以你可以这样调用它:

  // onLoad
  componentDidUpdate() {
    removeClassFromPrevious();
    var list = document.getElementsByClassName("slick-slide");
    list[this.state.prev].classList.add("prev");
  }
  // onChange
  componentWillUpdate() {
    removeClassFromPrevious();
    var list = document.getElementsByClassName("slick-slide");
    list[this.state.prev].classList.add("prev");
  }

<小时/>

或者以更可重用的方式:

function removeAllClassOcurrences(className) {
   var elements = document.getElementsByClassName(className);

   var array = [].slice.call(elements);

   array.forEach(function(item, index){      
      item.classList.remove(className);
   });

}
...
removeAllClassOcurrences("prev");