一页上有多个轮播，javascript冲突

Question

我正在尝试使用以下代码制作多个图像轮播，但该代码仅适用于一个轮播。

我尝试将 id 更改为类并尝试使用 $(this)。将该函数应用于正在选择的函数，但我对 javascript 很陌生，所以很难弄清楚它。我很感激你的帮助！

const FlexSlider = {
  // total no of items
  num_items: document.querySelectorAll(".slider-item").length,

  // position of current item in view
  current: 1,

  direction: '',

  init: function() {
    // set CSS order of each item initially
    document.querySelectorAll(".slider-item").forEach(function(element, index) {
      element.style.order = index + 1;
    });

    this.addEvents();
  },

  addEvents: function() {
    var that = this;

    // click on next item button
    document.querySelector("#next-button").addEventListener('click', () => {
      this.direction = 'next';
      this.gotoNext();
    });

    // click on prev item button
    document.querySelector("#prev-button").addEventListener('click', () => {
      this.direction = 'prev';
      this.gotoPrev();
    });

    // after each item slides in, slider container fires transitionend event
    document.querySelector("#slider-container-outer").addEventListener('transitionend', () => {
      if (this.direction == 'next') {
        this.changeOrderNext();
      } else {
        this.changeOrderPrev();
      }
    });
  },

  changeOrderNext: function() {
    // change current position
    if (this.current == this.num_items)
      this.current = 1;
    else
      this.current++;

    let order = 1;

    // change order from current position till last
    for (let i = this.current; i <= this.num_items; i++) {
      document.querySelector(".slider-item[data-position='" + i + "']").style.order = order;
      order++;
    }

    // change order from first position till current
    for (let i = 1; i < this.current; i++) {
      document.querySelector(".slider-item[data-position='" + i + "']").style.order = order;
      order++;
    }

    // translate back to 0 from -100%
    // we don't need transitionend to fire for this translation, so remove transition CSS
    document.querySelector("#slider-container").classList.remove('slider-container-transition');
    document.querySelector("#slider-container").style.transform = 'translateX(0)';
  },

  gotoNext: function() {
    // translate from 0 to -100% 
    // we need transitionend to fire for this translation, so add transition CSS
    document.querySelector("#slider-container").classList.add('slider-container-transition');
    document.querySelector("#slider-container").style.transform = 'translateX(-100%)';
  },

  changeOrderPrev: function() {
    // change current position
    if (this.current == 1)
      this.current = this.num_items;
    else
      this.current--;

    let order = 1;

    // change order from current position till last
    for (let i = this.current; i <= this.num_items; i++) {
      document.querySelector(".slider-item[data-position='" + i + "']").style.order = order;
      order++;
    }

    // change order from first position till current
    for (let i = 1; i < this.current; i++) {
      document.querySelector(".slider-item[data-position='" + i + "']").style.order = order;
      order++;
    }

    // translate back to 0 from -100%
    // we don't need transitionend to fire for this translation, so remove transition CSS
    document.querySelector("#slider-container").classList.remove('slider-container-transition');
    document.querySelector("#slider-container").style.transform = 'translateX(0)';
  },

  gotoPrev: function() {
    // translate from 0 to -100% 
    // we need transitionend to fire for this translation, so add transition CSS
    document.querySelector("#slider-container").classList.add('slider-container-transition');
    document.querySelector("#slider-container").style.transform = 'translateX(100%)';
  }
};

FlexSlider.init();

#slider-container-outer {
  overflow: hidden;
}

#slider-container {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}


/* CSS transition applied when translation of items happen */

.slider-container-transition {
  transition: transform 0.7s ease-in-out;
}

.slider-item {
  width: 100%;
  flex-shrink: 0;
}

<div id="slider-container-outer">
  <div id="slider-container" class="slider-container-transition">
    <div class="slider-item" data-position="1">Item 1</div>
    <div class="slider-item" data-position="2">Item 2</div>
    <div class="slider-item" data-position="3">Item 3</div>
    <div class="slider-item" data-position="4">Item 4</div>
  </div>
</div>
<button id="prev-button">Prev Item</button>
<button id="next-button">Next Item</button>

Answer 1

您的代码目前非常“全球化”。它使用

document.querySelector()

等，并且没有按元素划分。此外，您所依赖的 ID 对于网页上具有

id

属性的每个元素来说应该是唯一的。

相反，请考虑重构代码，以便为每个容器实例化：

class FlexSlider {
  constructor(root) {
    this._root = root;
    // set CSS order of each item initially
    this._root.querySelectorAll(".slider-item").forEach(function(element, index) {
      element.style.order = index + 1;
    });
    
    // total no of items
    this.num_items = this._root.querySelectorAll(".slider-item").length;

    // position of current item in view
    this.current = 1;

    this.direction = '';

    this.addEvents();
  }

  addEvents() {
    var that = this;

    // click on next item button
    this._root.querySelector(".next-button").addEventListener('click', () => {
      this.direction = 'next';
      this.gotoNext();
    });

    // click on prev item button
    this._root.querySelector(".prev-button").addEventListener('click', () => {
      this.direction = 'prev';
      this.gotoPrev();
    });

    // after each item slides in, slider container fires transitionend event
    this._root.addEventListener('transitionend', () => {
      if (this.direction == 'next') {
        this.changeOrderNext();
      } else {
        this.changeOrderPrev();
      }
    });
  }

  changeOrderNext() {
    // change current position
    if (this.current == this.num_items)
      this.current = 1;
    else
      this.current++;

    let order = 1;

    // change order from current position till last
    for (let i = this.current; i <= this.num_items; i++) {
      this._root.querySelector(".slider-item[data-position='" + i + "']").style.order = order;
      order++;
    }

    // change order from first position till current
    for (let i = 1; i < this.current; i++) {
      this._root.querySelector(".slider-item[data-position='" + i + "']").style.order = order;
      order++;
    }

    // translate back to 0 from -100%
    // we don't need transitionend to fire for this translation, so remove transition CSS
    this._root.querySelector(".slider-container").classList.remove('slider-container-transition');
    this._root.querySelector(".slider-container").style.transform = 'translateX(0)';
  }

  gotoNext() {
    // translate from 0 to -100% 
    // we need transitionend to fire for this translation, so add transition CSS
    this._root.querySelector(".slider-container").classList.add('slider-container-transition');
    this._root.querySelector(".slider-container").style.transform = 'translateX(-100%)';
  }

  changeOrderPrev() {
    // change current position
    if (this.current == 1)
      this.current = this.num_items;
    else
      this.current--;

    let order = 1;

    // change order from current position till last
    for (let i = this.current; i <= this.num_items; i++) {
      this._root.querySelector(".slider-item[data-position='" + i + "']").style.order = order;
      order++;
    }

    // change order from first position till current
    for (let i = 1; i < this.current; i++) {
      this._root.querySelector(".slider-item[data-position='" + i + "']").style.order = order;
      order++;
    }

    // translate back to 0 from -100%
    // we don't need transitionend to fire for this translation, so remove transition CSS
    this._root.querySelector(".slider-container").classList.remove('slider-container-transition');
    this._root.querySelector(".slider-container").style.transform = 'translateX(0)';
  }

  gotoPrev() {
    // translate from 0 to -100% 
    // we need transitionend to fire for this translation, so add transition CSS
    this._root.querySelector(".slider-container").classList.add('slider-container-transition');
    this._root.querySelector(".slider-container").style.transform = 'translateX(100%)';
  }
};

document
  .querySelectorAll('.slider-container-outer')
  .forEach(root => {
    new FlexSlider(root);
  });

.slider-container-outer {
  overflow: hidden;
}

.slider-container {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}


/* CSS transition applied when translation of items happen */

.slider-container-transition {
  transition: transform 0.7s ease-in-out;
}

.slider-item {
  width: 100%;
  flex-shrink: 0;
}

<div class="slider-container-outer">
  <div class="slider-container" class="slider-container-transition">
    <div class="slider-item" data-position="1">Item 1</div>
    <div class="slider-item" data-position="2">Item 2</div>
    <div class="slider-item" data-position="3">Item 3</div>
    <div class="slider-item" data-position="4">Item 4</div>
  </div>
  <button class="prev-button">Prev Item</button>
  <button class="next-button">Next Item</button>
</div>

<div class="slider-container-outer">
  <div class="slider-container" class="slider-container-transition">
    <div class="slider-item" data-position="1">Item 1</div>
    <div class="slider-item" data-position="2">Item 2</div>
    <div class="slider-item" data-position="3">Item 3</div>
    <div class="slider-item" data-position="4">Item 4</div>
  </div>
  <button class="prev-button">Prev Item</button>
  <button class="next-button">Next Item</button>
</div>