css 为什么我的Javascript代码可以在我的第一组html代码上工作，而不能在第二组完全重复的html代码上工作？

r6hnlfcb 于 2022-11-19 发布在 Java

关注(0)|答案(5)|浏览(374)

这是我的HTML

<section class="carousel">
        <div class="carousel__slider">
          <ul class="carousel__list">
    
            <li class="carousel__item">
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li class="carousel__item">
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li class="carousel__item">
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li class="carousel__item">
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li class="carousel__item">
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li class="carousel__item">
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
                 <li class="carousel__item">
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
          </ul>
        </div>
      </section>
  <script src="js/infinite.js"></script>

这是我的CSS

.main{
   
     
 width: 50vw;

     
        }
          ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
        
     .carousel {
    position: relative;
    overflow: hidden;
 

  }
  
  .carousel__slider {
    position: relative;
    display: flex;
    align-items: center;
    width: 50vw;
    height: 400px;
  }
  
  .carousel__list {
    position: absolute;
    width: 260%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  
  .carousel__item {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  
  .carousel__item:hover {
    transform: scale(1.1);
    font-size: 30px;
    background-color: rgba(255, 255, 255, 0.7);
  }

这是我的剧本

"use strict";

function carousel() {
  let carouselSlider = document.querySelector(".carousel__slider");
  let list = document.querySelector(".carousel__list");
  let item = document.querySelectorAll(".carousel__item");
  let list2;

  const speed = 1;

  const width = list.offsetWidth;
  let x = 0;
  let x2 = width;

  function clone() {
    list2 = list.cloneNode(true);
    carouselSlider.appendChild(list2);
    list2.style.left = `${width}px`;
  }

  function moveFirst() {
    x -= speed;

    if (width >= Math.abs(x)) {
      list.style.left = `${x}px`;
    } else {
      x = width;
    }
  }

  function moveSecond() {
    x2 -= speed;

    if (list2.offsetWidth >= Math.abs(x2)) {
      list2.style.left = `${x2}px`;
    } else {
      x2 = width;
    }
  }

  function hover() {
    clearInterval(a);
    clearInterval(b);
  }

  function unhover() {
    a = setInterval(moveFirst, 10);
    b = setInterval(moveSecond, 10);
  }

  clone();

  let a = setInterval(moveFirst, 10);
  let b = setInterval(moveSecond, 10);

  carouselSlider.addEventListener("mouseenter", hover);
  carouselSlider.addEventListener("mouseleave", unhover);
}

carousel();

然而，代码和JavaScript工作得很好！
如果我复制和粘贴我的HTML代码两次在我的HTML文件！
第一个转盘工作，但第二组（与第一组完全相同）不工作。
例如下面我只是做了一个代码的副本，第一个工作，但是，第二个什么都不做！有没有解释为什么会发生这种情况？

<section class="carousel">
        <div class="carousel__slider">
          <ul class="carousel__list">
    
            <li class="carousel__item">
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li class="carousel__item">
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li class="carousel__item">
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li class="carousel__item">
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li class="carousel__item">
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li class="carousel__item">
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
                 <li class="carousel__item">
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
          </ul>
        </div>
      </section>

   <section class="carousel">
        <div class="carousel__slider">
          <ul class="carousel__list">
    
            <li class="carousel__item">
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li class="carousel__item">
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li class="carousel__item">
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li class="carousel__item">
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li class="carousel__item">
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
            <li class="carousel__item">
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
                 <li class="carousel__item">
                <img src="images/KawaiiCoded Logo.jpg" alt="Kawaii Logo" width="400" height="400">
            </li>
          </ul>
        </div>
      </section>

  <script src="js/infinite.js"></script>

我不太确定如何解决这个问题。

css

来源：https://stackoverflow.com/questions/74492945/why-does-my-javascript-code-work-on-my-1st-set-of-html-code-but-not-the-second

5条答案

按热度按时间

hof1towb1#

document.querySelector查找与选择器匹配的第一个元素。
如果你想同时处理这两个问题，你需要使用querySelectorAll来查找所有carousel的顶层，然后循环遍历该列表，并将每个carousel作为自己的实体来处理，为此，你需要将所有其他查找元素的代码切换为使用前面提到的入口点，而不是document作为根来开始搜索。

赞(0）回复(0）举报 2022-11-19

ojsjcaue2#

这是预期的行为。您正在使用Document.querySelector方法，该方法将只返回第一个匹配的元素。这就是为什么您的代码只适用于第一个carousel。
如果你想应用到文档中的所有旋转列表，你应该循环Document.querySelectorAll的结果。注意，你会希望你的项是对元素执行Element.querySelectorAll的结果。而不是在这种情况下从文档中提取所有项。
处理多个转盘的示例代码：

function carousel(el) {
  let carouselSlider = el.querySelector(".carousel__slider");
  let list = el.querySelector(".carousel__list");
  let item = el.querySelectorAll(".carousel__item");
  let list2;

  // ... Original Code Here
}

for (const el of document.querySelectorAll(".carousel")) {
    carousel(el);
}

赞(0）回复(0）举报 2022-11-19

zbdgwd5y3#

如here所述，document.querySelector只查找与选择器匹配的第一个元素。
如果要获取所有元素，则应在case中使用document.querySelectorAll或document.getElementsByClassName，然后遍历它们以实现逻辑。

赞(0）回复(0）举报 2022-11-19

bxpogfeg4#

好的，这里的一些答案已经说明了你没有同时选择两个滑块，但是即使你做了一些事情，它们仍然不能工作，因为它们需要以不同的方式调用。有一些方法可以创建一个更抽象的函数来处理你的所有事情。但是考虑到这个问题，这可能是一个挑战。所以我建议您进行一些小的改动，并在caroussel中添加id，以便我们能够识别它们。让我们使用一个参数，这样您就不需要复制javscript部分两次，但我们只需要激活该函数两次，告诉它使用caroussel-1或caroussel-2
将id添加到HTML元素：

<section class="carousel" id="carousel-1">
    <!--Carousel HTML -->
</section>

<section class="carousel" id="carousel-2">
    <!--Carousel HTML -->
</section>

现在，对html代码的前几行和最后几行做一点改动。

"use strict";

let carousel1 = document.querySelector('#carousel-1');
let carousel2 = document.querySelector('#carousel-2')

function carousel(carouselId) {
  let carouselSlider = carouselId.querySelector(".carousel__slider");
  let list = carouselId.querySelector(".carousel__list");
  let item = carouselId.querySelectorAll(".carousel__item");
  let list2;

  const speed = 1;

  const width = list.offsetWidth;
  let x = 0;
  let x2 = width;

  function clone() {
    list2 = list.cloneNode(true);
    carouselSlider.appendChild(list2);
    list2.style.left = `${width}px`;
  }

  function moveFirst() {
    x -= speed;

    if (width >= Math.abs(x)) {
      list.style.left = `${x}px`;
    } else {
      x = width;
    }
  }

  function moveSecond() {
    x2 -= speed;

    if (list2.offsetWidth >= Math.abs(x2)) {
      list2.style.left = `${x2}px`;
    } else {
      x2 = width;
    }
  }

  function hover() {
    clearInterval(a);
    clearInterval(b);
  }

  function unhover() {
    a = setInterval(moveFirst, 10);
    b = setInterval(moveSecond, 10);
  }

  clone();

  let a = setInterval(moveFirst, 10);
  let b = setInterval(moveSecond, 10);

  carouselSlider.addEventListener("mouseenter", hover);
  carouselSlider.addEventListener("mouseleave", unhover);
}

carousel(carousel1);
carousel(carousel2);

赞(0）回复(0）举报 2022-11-19

rvpgvaaj5#

**The output is got three picture logos**

第一个

赞(0）回复(0）举报 2022-11-19

我来回答

css 为什么我的Javascript代码可以在我的第一组html代码上工作，而不能在第二组完全重复的html代码上工作？

5条答案

相关问题

热门标签

最新问答