D_S D_S - 20 days ago 7
Javascript Question

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

so I asked a similar question earlier today, but I'm trying to do an upgrade in the code I had. I'm trying to create a slider with a setTimeout function, but I keep getting the

removeClass is not a function error
on my
jquery
object. Here is a codepen with the code

Once again thanks in advance.

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

Check out how I changed your js function a bit. Seems to work fine now.

$(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>