js html脚本只能在一个gallery上工作?

tv6aics1  于 11个月前  发布在  其他
关注(0)|答案(1)|浏览(196)

我做了一个可滚动的画廊与本教程:https://www.youtube.com/watch?v=gzXyRa7jwk4&list=PLQthIda1maZcb0ADbOVT4mRYQVHLqSxqL&index=3&t=1s&ab_channel=GreatStack它的作品在我的第一个画廊罚款,但是,如果我试图将脚本应用到其他两个画廊,他们不滚动在所有
下面是运行的代码

let scrollContainer= document.querySelector (".gallery")
let arrowLeft = document.getElementById("arrowLeft")
let arrowRight = document.getElementById("arrowRight")

scrollContainer.addEventListener ("wheel", (evt) => {
  evt.preventDefault ();
  scrollContainer.scrollLeft +=evt.deltaY;
});

arrowLeft.addEventListener ("click", () => {
  scrollContainer.style.scrollBehavior = "smooth";
  scrollContainer.scrollLeft -= 900;
});

arrowRight.addEventListener ("click", () => {
  scrollContainer.style.scrollBehavior = "smooth";
  scrollContainer.scrollLeft += 900;
});

个字符
如前所述,它的工作,但是,如果我复制画廊和脚本和给予他们不同的类和ID(如.gallery2而不是.gallery)不知何故,它不工作。

let scrollContainer= document.querySelector (".gallery2")
let arrowLeft2 = document.getElementById("arrowLeft2")
let arrowRight2 = document.getElementById("arrowRight2")

scrollContainer.addEventListener ("wheel", (evt) => {
  evt.preventDefault ();
  scrollContainer.scrollLeft +=evt.deltaY;
});

arrowLeft2.addEventListener ("click", () => {
  scrollContainer.style.scrollBehavior = "smooth";
  scrollContainer.scrollLeft -= 900;
});

arrowRight2.addEventListener ("click", () => {
  scrollContainer.style.scrollBehavior = "smooth";
  scrollContainer.scrollLeft += 900;
});
<section id="Cocktails">
  <h2>
    Cocktails
  </h2>
  <div class="gallery-wrap2">
    <img id="arrowLeft2" src="images/arrow_left.jpg">
    <div class="gallery2">
      <div>
        <span >
          <a href="https://www.hdm-stuttgart.de/">
            <img src="images/audiovisualmedia.jpg">
            <p> Placeholder</p>
          </a>
        </span>
        <span>
          <img src="images/hdm.jpg">
        </span>
        <span>
          <img src="images/hdm_building.jpg">
        </span>
        <span>
          <img src="images/mobilemedia.jpg">
      </div>
      <div>
        <span>
          <img src="images/audiovisualmedia.jpg">
        </span>
        <span>
          <img src="images/hdm.jpg">
        </span>
        <span>
          <img src="images/hdm_building.jpg">
        </span>
        <span>
          <img src="images/mobilemedia.jpg">
      </div>
    </div>
    <img id="arrowRight2"src="images/arrow_right.png">
  </div>            
</section>

的字符串
你知道我该怎么补救吗?

o75abkj4

o75abkj41#

所以我找到了一个非常简单的解决方案。我需要在js中为每个画廊重命名scrollContainer变量。所以对于.gallery2,我创造性地将其重命名为scrollContainer2

<script>
    let scrollContainer2= document.querySelector (".gallery2")
    let arrowLeft2 = document.getElementById("arrowLeft2")
    let arrowRight2 = document.getElementById("arrowRight2")

    scrollContainer2.addEventListener ("wheel", (evt) => {
        evt.preventDefault ();
        scrollContainer2.scrollLeft +=evt.deltaY;
    });

    arrowLeft2.addEventListener ("click", () => {
        scrollContainer2.style.scrollBehavior = "smooth";
        scrollContainer2.scrollLeft -= 900;
    });

    arrowRight2.addEventListener ("click", () => {
        scrollContainer2.style.scrollBehavior = "smooth";
        scrollContainer2.scrollLeft += 900;
    });
</script>

字符串
所有的画廊现在工作,并可滚动

相关问题