优化5个重复的javascript函数

Question

两个按钮左右滚动 DIV。但是，我有这样 5 个这样的滚动条，并且 Javascript 变得重复。我们如何优化它？

PS：演示版仅显示 2 个滚动条。

DEMO JSFiddle：https://jsfiddle.net/8Lxw1bha/

HTML

<div class="nav-scroller">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="row nav" id="boxSliderFirst">
          <div class="col-md-3 nav-scroller__eighty">
            <div class="card">
              <div class="card-body">
                <h5><a href="#">Title 1</a></h5>
                <p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 nav-scroller__eighty">
            <div class="card">
              <div class="card-body">
                <h5><a href="#">Title 2</a></h5>
                <p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 nav-scroller__eighty">
            <div class="card">
              <div class="card-body">
                <h5><a href="#">Title 3</a></h5>
                <p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 nav-scroller__eighty">
            <div class="card">
              <div class="card-body">
                <h5><a href="#">Title 4</a></h5>
                <p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 nav-scroller__eighty">
            <div class="card">
              <div class="card-body">
                <h5><a href="#">Title 5</a></h5>
                <p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 nav-scroller__eighty">
            <div class="card">
              <div class="card-body">
                <h5><a href="#">Title 6</a></h5>
                <p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
              </div>
            </div>
          </div>
        </div>
        <input id="btnLeftFirst" type="Button" value="Prev"/>
        <input id="btnRightFirst" type="Button" value="Next" />  
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="row nav" id="boxSliderSecond">
          <div class="col-md-3 nav-scroller__eighty">
            <div class="card">
              <div class="card-body">
                <h5><a href="#">Title 1</a></h5>
                <p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 nav-scroller__eighty">
            <div class="card">
              <div class="card-body">
                <h5><a href="#">Title 2</a></h5>
                <p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 nav-scroller__eighty">
            <div class="card">
              <div class="card-body">
                <h5><a href="#">Title 3</a></h5>
                <p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 nav-scroller__eighty">
            <div class="card">
              <div class="card-body">
                <h5><a href="#">Title 4</a></h5>
                <p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 nav-scroller__eighty">
            <div class="card">
              <div class="card-body">
                <h5><a href="#">Title 5</a></h5>
                <p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 nav-scroller__eighty">
            <div class="card">
              <div class="card-body">
                <h5><a href="#">Title 6</a></h5>
                <p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
              </div>
            </div>
          </div>
        </div>
        <input id="btnLeftSecond" type="Button" value="Prev"/>
        <input id="btnRightSecond" type="Button" value="Next" />  
      </div>
    </div>
  </div>
</div>

CSS：

.nav-scroller {
  position: relative;
  z-index: 2;
  overflow-y: hidden;
}
.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  margin-top: -1px;
  overflow-x: auto;
  color: rgba(255, 255, 255, .75);
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.nav-underline .nav-link {
  padding-top: 50px;
  padding-bottom: 50px;
  font-size: 14px;
  color: #6c757d;
  min-width: 100px;
}

.nav-underline .nav-link:hover {
  color: #007bff;
}
.card-body p {
  color: #393939;
  white-space: pre-wrap;
}
.nav-underline .active {
  font-weight: 500;
  color: #343a40;
}
.nav-scroller__eighty {
  width: 80%;
  max-width: 80%;
}

JS：

/* first scroller */
const boxSliderFirst = document.getElementById('boxSliderFirst');
document.getElementById("btnLeftFirst").onclick = () => {
  boxSliderFirst.scroll({
    left: boxSliderFirst.scrollLeft + boxSliderFirst.querySelector(".col-md-3").offsetWidth,
    behavior: 'smooth'
  });
}
document.getElementById("btnRightFirst").onclick = () => {
  boxSliderFirst.scroll({
    left: boxSliderFirst.scrollLeft - boxSliderFirst.querySelector(".col-md-3").offsetWidth,
    behavior: 'smooth'
  });
}
/* second scroller */
const boxSliderSecond = document.getElementById('boxSliderSecond');
document.getElementById("btnLeftSecond").onclick = () => {
  boxSliderSecond.scroll({
    left: boxSliderSecond.scrollLeft + boxSliderSecond.querySelector(".col-md-3").offsetWidth,
    behavior: 'smooth'
  });
}
document.getElementById("btnRightSecond").onclick = () => {
  boxSliderSecond.scroll({
    left: boxSliderSecond.scrollLeft - boxSliderSecond.querySelector(".col-md-3").offsetWidth,
    behavior: 'smooth'
  });
}

Answer 1

我为这个示例重新设计了函数和 eventListener 类型，但你可以删除除一个函数之外的所有函数。

为什么不使用 event.target 与一个函数在循环中运行到 click eventListener确定正在按下哪个按钮。然后使用event.target 获取relative 父级及其第一个子级以获取scrolling 元素。这都相对到event.target，不需要所有这些静态函数。

只要您的结构相同，这将使一切动态化，无需任何唯一 ID 或额外功能。只需确保您拥有滚动 div 及其按钮的父/子结构以及按钮上所有相同的类和值。

您可以添加任意数量的这些 HTML 结构化滚动块，它们都将独立触发，因为 event.target 是获取滚动事件和按钮的轴。

// This class must be present on your next/previous buttons
const button = document.querySelectorAll('.btn');

// function to pass event into and get event.targets relative element
// and scroll scrolling element according to the class listed on the button
function scrollElement(e) {
  // get the parentNode (col-md-12) then its 
  // first childNode using the event.target
  let slider = e.target.parentNode.childNodes[1]
  // now use the event.target of the button to check the button being  
  // the event.target.value will work great for this
  e.target.value === "Next" ? slider.scroll({
    left: slider.scrollLeft + slider.querySelector(".col-md-3").offsetWidth,
    behavior: 'smooth'
  }) : slider.scroll({
    left: slider.scrollLeft - slider.querySelector(".col-md-3").offsetWidth,
    behavior: 'smooth'
  })
}

// run all buttons through a loop
button.forEach(btn => {
  // event listener for the button, pass event into listener
  btn.addEventListener('click', scrollElement)
})

.nav-scroller {
  position: relative;
  z-index: 2;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  margin-top: -1px;
  overflow-x: auto;
  color: rgba(255, 255, 255, .75);
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.nav-underline .nav-link {
  padding-top: 50px;
  padding-bottom: 50px;
  font-size: 14px;
  color: #6c757d;
  min-width: 100px;
}

.nav-underline .nav-link:hover {
  color: #007bff;
}

.card-body p {
  color: #393939;
  white-space: pre-wrap;
  width: 32.3vw;
}

.nav-underline .active {
  font-weight: 500;
  color: #343a40;
}

.nav-scroller__eighty {
  width: 80%;
  max-width: 80%;
}

<div class="nav-scroller">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="row nav">
          <div class="col-md-3 nav-scroller__eighty">
            <div class="card">
              <div class="card-body">
                <h5><a href="#">Title 1</a></h5>
                <p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 nav-scroller__eighty">
            <div class="card">
              <div class="card-body">
                <h5><a href="#">Title 2</a></h5>
                <p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 nav-scroller__eighty">
            <div class="card">
              <div class="card-body">
                <h5><a href="#">Title 3</a></h5>
                <p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 nav-scroller__eighty">
            <div class="card">
              <div class="card-body">
                <h5><a href="#">Title 4</a></h5>
                <p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 nav-scroller__eighty">
            <div class="card">
              <div class="card-body">
                <h5><a href="#">Title 5</a></h5>
                <p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 nav-scroller__eighty">
            <div class="card">
              <div class="card-body">
                <h5><a href="#">Title 6</a></h5>
                <p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
              </div>
            </div>
          </div>
        </div>
        <input class="btn" type="Button" value="Prev" />
        <input class="btn" type="Button" value="Next" />
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="row nav">
          <div class="col-md-3 nav-scroller__eighty">
            <div class="card">
              <div class="card-body">
                <h5><a href="#">Title 1</a></h5>
                <p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 nav-scroller__eighty">
            <div class="card">
              <div class="card-body">
                <h5><a href="#">Title 2</a></h5>
                <p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 nav-scroller__eighty">
            <div class="card">
              <div class="card-body">
                <h5><a href="#">Title 3</a></h5>
                <p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 nav-scroller__eighty">
            <div class="card">
              <div class="card-body">
                <h5><a href="#">Title 4</a></h5>
                <p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 nav-scroller__eighty">
            <div class="card">
              <div class="card-body">
                <h5><a href="#">Title 5</a></h5>
                <p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 nav-scroller__eighty">
            <div class="card">
              <div class="card-body">
                <h5><a href="#">Title 6</a></h5>
                <p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
              </div>
            </div>
          </div>
        </div>
        <input class="btn" type="Button" value="Prev" />
        <input class="btn" type="Button" value="Next" />
      </div>
    </div>
  </div>
</div>