我如何重写我的特定功能以与多个事件兼容

Question

我有多个包含内容块的容器。我有两个功能，可以通过单击容器左侧或右侧的按钮来激活，该按钮将向左或向右滚动。这两个函数在第一个容器中可以正常工作，但是由于我又要滚动其中四个容器，因此必须有一种更简单的方式来编写这些函数以与所有五个容器兼容。

我总是可以再复制和粘贴相同的代码四次，但这会造成非常丑陋和冗余的代码，因为唯一改变的是必须滚动的容器的类。

我希望一些经验丰富的前者能够帮助我重写这些功能。我没有编码员那么高级，所以我正在努力提出一个好的解决方案。

还有另一个问题是，使滚动成为可能的函数并不完全是我自己的代码。我在网上某个地方找到了大部分内容，只是对其做了些微改动以使其适用于我的网站。因此，我不能完全确定所有这些语句的工作方式，只是大致而言。

作为一种可能的解决方案，我认为可能有一个数组，用于存储容器的类名称，并将它们粘贴到我执行的.querySelector中以获取该类。但可悲的是，我无法按照我想要的方式来实现它。

<!-- example code -->
<div>
      <h1>Container title</h1>
        <div>
         <button id="scrollLeft1" type="button">&#60;</button>
          <div class="container">
            <figure>
                <img src="some image" alt="">
                <figcaption>Test 1</figcaption>
            </figure>
            <figure>
                <img src="some image" alt="">
                <figcaption>Test 2</figcaption>
            </figure>
            <figure>
                <img src="some image" alt="">
                <figcaption>Test 3</figcaption>
            </figure>
          </div>
         <button id="scrollRight1" type="button">&#62;</button>
        </div>
</div>
<div>
      <h1>Container title 2</h1>
        <div>
         <button id="scrollLeft2" type="button">&#60;</button>
          <div class="container">
            <figure>
                <img src="some image" alt="">
                <figcaption>Test 1</figcaption>
            </figure>
            <figure>
                <img src="some image" alt="">
                <figcaption>Test 2</figcaption>
            </figure>
            <figure>
                <img src="some image" alt="">
                <figcaption>Test 3</figcaption>
            </figure>
          </div>
         <button id="scrollRight2" type="button">&#62;</button>
        </div>
</div>

var buttonOne = document.querySelector("#scrollLeft1");
var buttonTwo = document.querySelector("#scrollRight1");
var buttonThree = document.querySelector("#scrollLeft2");
var buttonFour = document.querySelector("#scrollRight2");

function scrollRight() {
                var container = document.querySelector(".container");
                scrollAmount = 0;
                var slideTimer = setInterval(function(){
                    container.scrollLeft += 10;
                    scrollAmount += 10;
                    if(scrollAmount >= 700){
                        window.clearInterval(slideTimer);
                    }
                }, 5);
            };

function scrollLeft() {
                var container = document.querySelector(".container");
                scrollAmount = 0;
                var slideTimer = setInterval(function(){
                    container.scrollLeft -= 10;
                    scrollAmount += 10;
                    if(scrollAmount >= 700){
                        window.clearInterval(slideTimer);
                    }
                }, 5);
            };

buttonOne.addEventListener("click", scrollLeft);
buttonTwo.addEventListener("click", scrollRight);
buttonThree.addEventListener("click", scrollLeft);
buttonFour.addEventListener("click", scrollRight);

Answer 1

我创建了您的代码版本，该版本应可在不同的容器之间重用，并且还留下了一些注释以更好地了解发生了什么。

// create an array with all buttons that scroll left
var leftScrollButtons = document.querySelectorAll("#scrollLeft1, #scrollLeft2, #other-btn-id, .other-btn-class");

// create another array with all buttons that scroll right
var rightScrollButtons = document.querySelectorAll("#scrollRight1, #scrollRight2, #other-btn-id, .other-btn-class");

// create a default configuration object
var configDefault = {
  direction: 1, // use 1 for right, -1 for left
  amount: 10,
  interval: 5,
  threshold: 700
}

// scrolling function will use the configuration object for the information that it needs
function horizontalScroll(configObj) {
  var container = document.querySelector(".container");
  scrollAmount = 0;
  var slideTimer = setInterval(function(){
    container.scrollLeft += configObj.amount * configObj.direction;
    scrollAmount += configObj.amount;
    if(scrollAmount >= configObj.threshold){
      window.clearInterval(slideTimer);
    }
  }, configObj.interval);
}

// will iterate over every item of the array (all buttons) and add a click event listener to them
leftScrollButtons.forEach(button => button.addEventListener("click", function(ev) {
  var container = ev.currentTarget.parentElement.querySelector('.container');
  // from the default configuration object, overrite what you need, in this case, the direction property
  var configLeft = Object.assign({}, configDefault, {direction: -1, container: container});
  horizontalScroll(configLeft);
  debug("Scrolled left", container); // used only for the demo
}));

// will iterate over every item of the array (all buttons) and add a click event listener to them
rightScrollButtons.forEach(button => button.addEventListener("click", function(ev) {
  var container = ev.currentTarget.parentElement.querySelector('.container');
  // from the default configuration object, overrite what you need, in this case, no need to overrite anything here
  var configRight = Object.assign({}, configDefault, {container: container});
  horizontalScroll(configRight);
  debug("Scrolled right", container); // used only for the demo
}));

// only used for the demo
function debug(action, container) {
  var actionSpan = document.querySelector('.action-span');
  actionSpan.innerText = action;
  var containerSpan = document.querySelector('.container-span');
  containerSpan.innerText = container.parentElement.previousElementSibling.innerText;
}

<!-- to test the demo -->
<p>Last action: <span class="action-span"></span></p>
<p>Container: <span class="container-span"></span></p>

<!-- example code -->
<div>
  <h1>Container title</h1>
  <div>
    <button id="scrollLeft1" type="button">&#60;</button>
    <div class="container">
      <figure>
        <img src="some image" alt="">
        <figcaption>Test 1</figcaption>
      </figure>
      <figure>
        <img src="some image" alt="">
        <figcaption>Test 2</figcaption>
      </figure>
      <figure>
        <img src="some image" alt="">
        <figcaption>Test 3</figcaption>
      </figure>
    </div>
    <button id="scrollRight1" type="button">&#62;</button>
  </div>
</div>
<div>
  <h1>Container title 2</h1>
  <div>
    <button id="scrollLeft2" type="button">&#60;</button>
    <div class="container">
      <figure>
        <img src="some image" alt="">
        <figcaption>Test 1</figcaption>
      </figure>
      <figure>
        <img src="some image" alt="">
        <figcaption>Test 2</figcaption>
      </figure>
      <figure>
        <img src="some image" alt="">
        <figcaption>Test 3</figcaption>
      </figure>
    </div>
    <button id="scrollRight2" type="button">&#62;</button>
  </div>
</div>