如果我有多個 ul 並且所有 li 具有相同的類名，我如何獲得特定於 ul 的 li

Question

我希望每個ul所有li以這種形式排列 0px、200px、400px 等。具體取決於該特定ul中li的數量。 我的代碼以這種方式將它連接起來 0px,200px,400px,600px,800px，從 600px 開始， li在另一個ul我希望它也從 0px,200px 開始以這種格式。 我怎樣才能做到這一點？

 var slider = document.getElementsByClassName('slider'); var slide = document.getElementsByClassName('slide'); var art = document.getElementsByTagName('article'); var child = [], slideWidth = 200; for (var i = 0; i < art.length; i++) { art[i].addEventListener('mouseover', function(event) { getslide(event) }) } function getslide(event) { for (var i = 0; i < slide.length; i++) { let elem = event.target.getAttribute('data'); if (slide[i].getAttribute('data') != null && slide[i].getAttribute('data') == elem) { console.log(slide[i].style.left = slideWidth * i + 'px); } } }

 <article data=0> <button class="btn2">></button> <button class="btn1"> <</button> <h5 class="pricin">N20,000</h5> <ul class="slider"> <li class="slide" data=0> <img src="image-2.jpeg" alt=""> </li> <li class="slide" data=0> <img src="image-4.jpeg" alt=""> </li> <li class="slide" data=0> <img src="summer.jpg" alt=""> </li> </ul> </article> <article data=1> <button class="btn2">></button> <button class="btn1"> <</button> <h5 class="pricin">N20,000</h5> <ul class="slider"> <li class="slide" data=1> <img src="image-1.jpeg" alt=""> </li> <li class="slide" data=1> <img src="image-5.jpeg" alt=""> </li> </ul> </article>

Answer 1

你能編輯 HTML 嗎？ 我建議給他們一個唯一的 ID 或給他們另一個類。 元素可以有多個類，因此不僅限於一個。

您也可以嘗試使用父選擇器或子選擇器，但您似乎沒有任何唯一標識符，因此很難做到。

Answer 2

您可以在 ul 上使用不同的 id 屬性並使用

var slide = document.querySelectorAll("#myId > .slide")

您還可以在元素上使用 querySelectorAll。

var slider = document.getElementById("myId")
var slide = slider.querySelectorAll(".slide")

你總是可以通過使用選擇器的組合來制作或多或少的特定內容

Answer 3

不完全確定您要在這里做什么，可能缺少 css 可以彌補差距，但根據我的理解，這是一個解決方案。

        var slider = document.getElementsByClassName('slider');
        var art = document.getElementsByTagName('article');
        var child = [],
          slideWidth = 200;

        for (var i = 0; i < art.length; i++) {
            art[i].addEventListener('mouseover', function(event) {
                getslide(event)
            })
        }

        function getslide(event) {
            for (var i = 0; i < slider.length; i++) {
                var slide = slider[i].getElementsByClassName('slide');
                for (var j = 0; j < slide.length; j++) {
                    let elem = event.target.getAttribute('data');
                    if (slide[j].getAttribute('data') != null && slide[j].getAttribute('data') == elem) {
                        console.log(slide[j].style.left = slideWidth * j + 'px');
                    }
                }
            }
        }

我用了兩個循環。 第一個用於滑塊，第二個用於該特定滑塊內的幻燈片。 這就是為什么我在第一個循環中聲明var slide原因。 每次滑塊更改時， j變量將從0開始。 所以你的像素數將從0開始。 不是一個非常優雅的解決方案，但它會起作用。 希望有幫助。 快樂編碼:)