时间戳

首页 > 解决方案 > 如果我有多个 ul 并且所有 li 都具有相同的类名，我如何获得特定于 ul 的 li

javascript - 如果我有多个 ul 并且所有 li 都具有相同的类名，我如何获得特定于 ul 的 li

问题描述

我希望li每个中的所有内容都ul以这种形式排列 0px、200px、400px 等。这取决于li该特定内部的数量ul。我的代码以这种方式加入它 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>

标签： javascripthtmlcss

解决方案

你可以编辑HTML吗？我建议给他们一个唯一的 ID 或给他们另一个课程。元素可以有多个类，因此不仅限于一个。

您也可以尝试使用父选择器或子选择器，但您似乎没有任何唯一标识符，因此很难做到。

推荐阅读