删除上一张幻灯片中的 class

Question

我正在使用 ant design 和 reactjs 制作轮播。

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

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

希望你理解我。

谢谢。

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

您可以删除 class 的所有出现，然后再使用此函数将其分配给新元素：

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");

删除上一张幻灯片中的 class

Remove class on previous slide

javascript

carousel

reactjs

antd