element.querySelector (". ExampleClass") не является функцией

Question

Я пытаюсь создать отзывчивую карусель, и я получаю сообщение об ошибке в следующем коде. Я пробовал использовать JQuery, другие методы выбора, но все они возвращают ту же ошибку.

Я стараюсь, чтобы выбрать элемент здесь, первый мой доступ к его родительский элемент

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

В о возвращает код и ERROR, что carousel.querySelector не является функцией.

Который создает проблему, а также винты вверх функция изменения размера ниже:

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 как это «undefined»

Я ДЕЙСТВИТЕЛЬНО просто должен иметь возможность добавить свойство CSS «transform: translate» к элементу контейнера.

Я в затруднительном положении, чтобы что-то попробовать ... действительно оценил бы некоторую обратную связь!

Answer 1

querySelector - родной метод JS, а carousel - объект jQuery. Если вы используете jQuery, существует 0 причин для использования 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');