Один код javascript для двух одинаковых id

131
30 октября 2019, 01:50

Не подскажете, как сделать так, что бы javascript применялcя к двум блокам (gentags)? А то, на данный момент, все работает только на первом блоке. Заранее спасибо JSFiddle

HTML

<div id="gentags">
    <div class="item">123</div>
    <div class="item">123</div>
    <div class="item">123</div>
</div>
<div id="gentags">
    <div class="item">123</div>
    <div class="item">123</div>
    <div class="item">123</div>
</div>

CSS

html, body {
      margin: 0;
      padding: 0;
      background: #100e17;
      -ms-overflow-style: none;  // IE 10+
      overflow: -moz-scrollbars-none;  // Firefox
}
#gentags {
        width: 100%;
      padding: 0 10px;
      overflow-x: auto; /**/
      white-space: nowrap;
    }
    .item {
      display: inline-block;
      width: 75%;
      height: 150px;
      margin: 10px;
      background: red;
    }
    ::-webkit-scrollbar {
    display: none;
    width: 0px;
    background: transparent;
    }

JAVASCRIPT

(function() {
    const slider = document.getElementById('gentags');
    let isDown = false;
    let startX;
    let scrollLeft;
    slider.addEventListener('mousedown', (e) => {
      isDown = true;
      slider.classList.add('active');
      startX = e.pageX - slider.offsetLeft;
      scrollLeft = slider.scrollLeft;
    });
    slider.addEventListener('mouseleave', () => {
      isDown = false;
      slider.classList.remove('active');
    });
    slider.addEventListener('mouseup', () => {
      isDown = false;
      slider.classList.remove('active');
    });
    slider.addEventListener('mousemove', (e) => {
      if(!isDown) return;
      e.preventDefault();
      const x = e.pageX - slider.offsetLeft;
      const walk = (x - startX) * 1; //scroll-fast
      slider.scrollLeft = scrollLeft - walk;
      console.log(walk);
    });
        function scrollHorizontally(e) {
            e = window.event || e;
            var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
            document.getElementById('gentags').scrollLeft -= (delta*40); // Multiplied by 40
            e.preventDefault();
        }
        if (document.getElementById('gentags').addEventListener) {
            // IE9, Chrome, Safari, Opera
            document.getElementById('gentags').addEventListener("mousewheel", scrollHorizontally, false);
            // Firefox
            document.getElementById('gentags').addEventListener("DOMMouseScroll", scrollHorizontally, false);
        } else {
            // IE 6/7/8
            document.getElementById('gentags').attachEvent("onmousewheel", scrollHorizontally);
        }
    })();
Answer 1
<div class="gentags">
document.querySelectorAll('.gentags').forEach(slider => {
  slider.addEventListener('mousedown', (e) => {
    this.isDown = true;
    this.classList.add('active');
    startX = e.pageX - this.offsetLeft;
    scrollLeft = this.scrollLeft;
  });
  ...
});
READ ALSO
как сделать красивее код?

как сделать красивее код?

Красивее - коротко и ясно, а не с кучей макарон

141
Захватить разные скриншоты

Захватить разные скриншоты

Пытаюсь написать такой тест:

105
JavaScript | node.js | Discord bot | Помогите разобраться с Массивом

JavaScript | node.js | Discord bot | Помогите разобраться с Массивом

Такая проблема, у меня есть 2 массива, к примеру эти:

125
Ошибка в коде js [закрыт]

Ошибка в коде js [закрыт]

Файл js подключен перед закрывающим тегом body

137