带有setTimeout的滑块- 'removeClass is not a function error‘
带有setTimeout的滑块- 'removeClass is not a function error‘
提问于 2016-11-17 23:11:55
所以我今天早些时候问了一个类似的问题，但我正在尝试对我已有的代码进行升级。我试图用setTimeout函数创建一个滑块，但我一直在我的jquery对象上得到removeClass is not a function error。这是一个包含代码的codepen
index.html
<div class=container>
<img class='isActive' src="http://placehold.it/350x150">
<img class='isHidden' src="http://placehold.it/350x150">
<img class='isHidden' src="http://placehold.it/350x150">
<img class='isHidden'src="http://placehold.it/350x150">
</div>index.scss
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background: black;
}
.container {
display: inline;
//border: 1px solid white;
}
.slide {
}
.isActive {
visibility: visible;
}
.isHidden {
visibility: hidden;
}index.js
$(function() {
var timer;
var $allImgItems = $('img');
var $items = $('.container').find($allImgItems);
for (let i = 0; i < $items.length; i++) {
var $item = $items[i];
$item.removeClass('isHidden').addClass('isActive')
/*$item.removeClass('isHidden').addClass('isActive).setTimeout(function() { $( this ).animate( { scrollLeft: 200 + 'px' } ), '500', 'swing', function() { console.log('Animation completed') } }) */
console.log(`We are at this item: ${$item}`);
}
}) 回答 3
Stack Overflow用户
回答已采纳
发布于 2016-11-17 23:34:37
看看我是如何修改你的js函数的。现在似乎运行得很好。
$(function() {
var timer;
var $items = $('img', '.container');
for (let i = 0; i < $items.length; i++) {
var item = $items[i];
$(item).removeClass('isHidden').addClass('isActive');
console.log(`We are at this item: ${item}`);
}
})html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background: black;
}
.container {
display: inline;
//border: 1px solid white;
}
.slide {
}
.isActive {
visibility: visible;
}
.isHidden {
visibility: hidden;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=container>
<img class='isActive' src="http://placehold.it/350x150">
<img class='isHidden' src="http://placehold.it/350x150">
<img class='isHidden' src="http://placehold.it/350x150">
<img class='isHidden'src="http://placehold.it/350x150">
</div>
Stack Overflow用户
发布于 2016-11-17 23:18:30
此处的jQuery选择器
var $items = $('.container').find($allImgItems);返回元素数组，但这些元素本身不是jQuery对象。抓取元素后，将其包装在$()中以使其成为jQuery对象。
var $item = $($items[i]);Stack Overflow用户
发布于 2016-11-17 23:19:26
当你这样做的时候
var $items = $('.container').find($allImgItems);
for (let i = 0; i < $items.length; i++)
{
var $item = $items[i];$item是一个html节点，而不是一个jquery对象，而.removeClass是一个jquery对象函数，所以您需要像这样修改它。
$($item).removeClass('isHidden').addClass('isActive')页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40658446
复制相关文章
相似问题