javascript - 带 setTimeout 的 slider - 'removeClass is not a function error'

Question

所以我今天早些时候问了类似的问题，但我正在尝试对我的代码进行升级。我正在尝试使用 setTimeout 函数创建 slider ，但我的 jquery 对象上不断收到 removeClass is not a function 错误。这是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

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