Question

我使用ant design和reactjs在旋转木马上工作。

我试图制作这个滑块3d smooth carousel，我成功地做到了。

我的问题出现在左边的上一张图片上。我不能删除每次轮播更改时添加的课程，该课程应始终位于上一张幻灯片中，而不是之前的所有幻灯片。

希望你理解我。

感谢。

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

删除上一张幻灯片上的课程

1 个答案: