javascript - element.querySelector (".exampleClass") 不是函数

Question

我正在尝试构建响应式轮播，但在以下代码中出现错误。我尝试过使用 JQuery 和其他选择方法，但它们都返回相同的错误。

我尝试在这里选择元素，首先我访问它的父元素

     var carousel = $('#carousel');
     var container = carousel.querySelector('.carousel-container');

关于carousel.querySelector不是函数的代码返回和ERROR。

这造成了一个问题，并且还搞砸了下面的调整大小功能:

  function slideTo(index){
      index = index < 0 ? totalItems -1 : index >= totalItems ? 0 : index;
      container.style = container.style.transform = 'translate(-' + (index * percent) + '%, 0)';
       currentIndex = index;
   }

函数第三行中的 Container.style 返回一个错误，我无法在 container.style 上设置属性，因为它是“未定义”

我真的只需要能够将 CSS“transform : translate”属性添加到容器元素。

我不知道要尝试什么...非常感谢您的反馈!

Answer 1

querySelector 是原生 JS 方法，carousel 是 jQuery 对象。如果您使用 jQuery，则没有理由使用 queryselector。

jQuery

var carousel = $('#carousel'); //jQuery object
var container = carousel.find('.carousel-container'); //jquery object of carousel-container

DOM

var domCarousel=carousel.find('.carousel-container')[0];

大致相当于

domCarousel=document.getElementById('carousel').querySelector('.carousel-container');