带有 setTimeout 的滑块 - 'removeClass is not a function error'

Question

所以我今天早些时候问了一个类似的问题，但我正在尝试对我的代码进行升级。我正在尝试创建一个带有 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}`);    
  }
})

Answer 1

这里是 jQuery 选择器

var $items = $('.container').find($allImgItems);

returns 一个元素数组，但这些元素本身不是 jQuery 对象。抓取元素后将其包裹在 $() 中，使其成为 jQuery 对象。

var $item = $($items[i]);

Answer 2

当你这样做时

  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')

Answer 3

看看我是如何稍微改变你的 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>

带有 setTimeout 的滑块 - 'removeClass is not a function error'

Slider with setTimeout - 'removeClass is not a function error'

javascript

jquery

slider