У меня есть несколько контейнеров с блоками контента внутри них. У меня есть две функции, которые активируются нажатием на кнопку слева или справа от контейнера, который будет прокручивать его влево или вправо. Эти две функции прекрасно работают для первого контейнера, но поскольку у меня есть еще четыре из этих контейнеров, которые я хочу прокручивать, должен быть более простой способ написания этих функций, чтобы они были совместимы со всеми пятью контейнерами.

Я всегда мог копировать и вставлять один и тот же код еще четыре раза, но это приводит к очень уродливому и избыточному коду, потому что единственное, что меняется, - это класс контейнера, который нужно прокрутить.

Я надеюсь, что некоторые более опытные фронтендеры смогут помочь мне переписать эти функции. Я не настолько продвинут, как программист, поэтому я изо всех сил стараюсь найти хорошее решение.

Также другая проблема заключается в том, что функции, которые делают возможной прокрутку, не полностью мой собственный код. Я нашел где-то большую часть онлайн и только немного изменил его, чтобы он работал на моем сайте. Так что я не совсем уверен, как все эти заявления работают, только приблизительно.

В качестве возможного решения я подумал, что, возможно, есть массив, в котором хранятся имена классов контейнеров, и они должны быть вставлены в то место, где я делаю .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);
0
RandomLetters

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>
58574644