香草JS - swup.js页面转换后重新初始化函数

Question

我对JS相当陌生，我正在使用swup.js (一个很棒的库)在站点上的页面之间进行转换。过渡工作很好，但过渡后，我需要重新调整一些JS功能，我有。

根据swup.js文档，我只是将它们包装在一个swup事件中。在下面的场景中，我将如何做到这一点？我认为我特别需要将这两个函数重新添加到两个按钮左/按钮右常量中。

这里的例子：https://swup.js.org/getting-started/reloading-javascript

//JS in script tag at bottom of body
    const swup = new Swup();
        init();
        swup.on('contentReplaced', init);


// Function called in my main.js file
function init() {
    if (document.querySelector('')) { // What do I include here?
        // What do I include here?
    }


// Functions I'd like reinitialized (also in main.js)
const buttonRight = document.getElementById('slide-right');
const buttonLeft = document.getElementById('slide-left');
buttonLeft.onclick = scrollLeft; 
buttonRight.onclick = scrollRight;

function scrollLeft() {
  document.getElementById('hoz-scroller').scrollTo({ left: 0, behavior: 'smooth' }); 
  buttonLeft.classList.add('disabled'); 
  if (buttonRight.classList.contains('disabled')) { 
    buttonRight.classList.remove('disabled'); 
  }
};

function scrollRight() {
  document.getElementById('hoz-scroller').scrollTo({ left: elementWidth, behavior: 'smooth' }); 
  buttonRight.classList.add('disabled'); 
  if (buttonLeft.classList.contains('disabled')) { 
  buttonLeft.classList.remove('disabled'); 
  }
};

Answer 1

回答了我自己的问题。多亏了这些家伙：https://openclassrooms.com/en/courses/3523231-learn-to-code-with-javascript/4379006-use-constructor-functions。如果其他人需要的话，请在下面回答：

基本上，您需要将分离的函数包装在一个新函数中，并在swup函数中调用它：

function init() {
    if (document.querySelector('#hoz-scroller')) { //This checks if this element is on the the page (in the html)
        new scrollers(); // If it is then it creates a new instance of the 'scrollers' function
    }
}
var scrollStart = new scrollers(); // This initialises the below function the first time (first page load not controlled by swup)

function scrollers() { // This it the wrapper funtion

  const element = document.getElementById("hoz-scroller"); 
  const elementRect = element.getBoundingClientRect(); 
  const elementWidth = elementRect.width;  
  const elementMiddle = (elementWidth / 2 - 50); 
  element.scrollTo(elementMiddle, 0); 

  const buttonRight = document.getElementById('slide-right'); 
  const buttonLeft = document.getElementById('slide-left');
  buttonLeft.onclick = scrollLeft; 
  buttonRight.onclick = scrollRight;

  function scrollLeft() {
    document.getElementById('hoz-scroller').scrollTo({ left: 0, behavior: 'smooth' });  
    buttonLeft.classList.add('disabled'); 
    if (buttonRight.classList.contains('disabled')) { 
      buttonRight.classList.remove('disabled'); 
    }
  };
  function scrollRight() {
    document.getElementById('hoz-scroller').scrollTo({ left: elementWidth, behavior: 'smooth' }); 
    buttonRight.classList.add('disabled'); 
    if (buttonLeft.classList.contains('disabled')) { 
    buttonLeft.classList.remove('disabled');
    }
  };
};