jQuery addClass example

Change class name on click in jQuery

HTML

<select id="imgIndexInput">
  <option value='0'>Image 0</option>
  <option value='1'>Image 1</option>
  <option value='2'>Image 2</option>
  <option value='3'>Image 3</option>
  <option value='4'>Image 4</option>
  <option value='5'>Image 5</option>
</select>

<div id="app">
  <img class="img" src="https://imgur.com/ANKvzxJ.png"/>
  <img class="img" style="display: none;" src="https://imgur.com/mzrMmLp.png"/>
  <img class="img" style="display: none;" src="https://imgur.com/ztfkAMz.png"/>
  <img class="img" style="display: none;" src="https://imgur.com/TmxqpkR.png"/>
  <img class="img" style="display: none;" src="https://imgur.com/Z1WrT8Z.png"/>
  <img class="img" style="display: none;" src="https://imgur.com/alAHUNN.png"/>
  <img class="img" style="display: none;" src="https://imgur.com/IN5oWqi.png"/>
  <img class="img" style="display: none;" src="https://imgur.com/2CaUJze.png"/>
</div>

CSS

.img {
  width: 500px;
  height: 300px;
}

JavaScript

let imgIndex = 0;
$('#imgIndexInput').change(function() {
	$('img').hide();
  $($('img')[this.value]).show();
});