刪除上一張幻燈片上的課程

Question

我正在使用ant design和reactjs進行輪播。

我試圖使此滑塊3d平滑輪播 ，但我成功地做到了。

我的問題是在上一張圖片的左側。 我無法刪除每次輪播更改時添加的類，該類應始終位於上一張幻燈片中，而不是所有先前的幻燈片中。

希望你能理解我。

謝謝。

樣本代碼

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